D3.js:選択の理解とVanillaJavaScriptとの比較
この記事は、D3内で選択がどのように機能するかを示すことを目的としています。 ビルドシステムのないスクリプトとしてd3.js
を含む基本的なプロジェクトから始めます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3: Selections</title>
</head>
<body>
<div class="about-me">
<p>Hi! My name is Paul and here's some facts about me.</p>
<ul id="list">
<li>I'm a powerlifter</li>
<li>I'm studying MSc Data Science</li>
<li>I love D3.js!</li>
</ul>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="main.js"></script>
</body>
</html>
D3なしでDOM要素を選択および変更する方法を検討してください。
const listItems = [...document.getElementsByTagName('li')];
listItems.map(item => item.style.setProperty('font-weight', 'bold'));
これは今のところそれほど複雑ではありませんが、規模を拡大するにつれて、物事はますます難しくなり、推論するのが難しくなることが予想されます。 これが、D3を検討する必要がある理由です。
D3での選択
DOM内の複数の要素を操作したいときに、それらの上にマップする必要があったことに注意してください。 D3を選択すると、ページ上の 1つ以上の要素をクエリでき、反復を必要とせずに選択全体を操作できます。
標準のCSSセレクター構文を使用しているため、要素の名前、.about-me
のクラス、#list
のIDなどでクエリを実行できます。
次のいずれかを使用して、DOMから要素を選択できます。
select()
は、DOMからone要素を取得します。 複数の一致がある場合は、最初の一致のみが取得されます。selectAll()
は、DOMからall要素を取得します。
例
これをコード例で見てみましょう。 バニラJavaScriptの例と同じことを1行で行うことができます。
const li = d3.selectAll('li').style('font-weight', 'bold');
ご覧のとおり、style
などの他のメソッドにチェーンできる要素のコレクションを返します。
これをselectAll
ではなくselect
に変更すると、I'm a powerlifter
が太字になる唯一のli
であることがわかります。 DOMの最初のli
。
新しいリストアイテムを追加する
選択の力をさらに示すために、JavaScriptを使用して新しいli
をDOMに追加する方法を検討してください。
const ul = document.getElementsByTagName('ul')[0];
const newItem = document.createElement('li');
newItem.appendChild(document.createTextNode(`I'm learning about selections.`));
ul.appendChild(newItem);
繰り返しになりますが、複雑なデータの視覚化を作成しようとしている場合、これは必ずしも最適なワークフローではありません。 D3で同じ例を見てみましょう。
const ul = d3.select('ul');
ul.append('li').text(`I'm learning about selections`);
はるかに簡単です! 各関数は、前の変更またはクエリの更新された値を返すため、メソッドを強力な方法で連鎖させることができます。
サブセレクション
選択したアイテム内を選択することもできます。 ul
セレクションの中から最初のli
を選択し、それを赤にして、これを見てみましょう。
const ul = d3.select('ul');
ul.select('li').style('color', 'red');
ul.append('li').text(`I'm learning about selections`);
ご覧のとおり、最初の選択だけに限定されているわけではありません。 引き続きサブ選択を行い、実装についてより具体的にすることができます。
セレクションはどのように見えますか?
console.log
を使用して、select
クエリを調べて、何が返されるかを調べてみましょう。
{
_groups: [Array(1)]
_parents: [html]
}
_groups
を展開すると、選択したとおりにul
が返されることがわかります。 選択をselectAll('li')
に変更した場合、_groups
はNodeList(3)
内のli
のコレクションを含むArray
を返します。
const li = d3.selectAll('li');
console.log(li);
_groups: Array(1)
0: NodeList(3)
0: li
1: li
2: li
_parents: [html]
当然、_parents
オブジェクトには、この選択の親が含まれ、ルートhtml
オブジェクトになります。
今のところ以上です! D3.jsの使用についての詳細をお楽しみに。