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の使用についての詳細をお楽しみに。