D3.js：選択の理解とVanillaJavaScriptとの比較

投稿日: 2022-04-20 2022-04-20
タグ: javascript

この記事は、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'));

vanilla JavaScript DOM selection

これは今のところそれほど複雑ではありませんが、規模を拡大するにつれて、物事はますます難しくなり、推論するのが難しくなることが予想されます。これが、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);

Screenshot: Appending an element

繰り返しになりますが、複雑なデータの視覚化を作成しようとしている場合、これは必ずしも最適なワークフローではありません。 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の使用についての詳細をお楽しみに。

getdocs

13036