d3

DOMの基本

31 May 2014

DOM要素をwebページに追加する

<div id="ins01"></div>
d3.select("#ins01").append("div");


Select Method

.select("#ins01")

Append Operator

.append("div")

データをDOM要素に結び付る

var theData = [ 1, 2, 3 ];

var p = d3.select("#ins02").selectAll("p")
           .data(theData)
           .enter()
           .append("p")
           .text("Hi ");

SelectAll Method

.selectAll("p")

Hi が3回表示されました。

Data Operator

.data(theData)

dataオペレータは、配列のデータ(数字、オブジェクト、他の配列)をセレクションに結び付けます。

この例では、キーが無いので、配列データ(theData)の各要素は、セレクションの各要素に割り当てられます。1は最初の<p>要素に、2は2番目の要素に、3は3番目の要素に。

しかし、まだ<p>要素はページ上にありません。どうなっているのでしょう?

  Virtual Selections

他のメソッドが通常1つのセレクションを返すのに対し、 dataオペレータは、3つの仮想セレクションを返します。

それは、enter,update,exitです。

d3.select("#ins01").selectAll("p")は空でした。 enterセレクションは、不足している<p>要素の置き場所を保持しています。

Enter Method

enterメソッドは、dataオペレータから、仮想enterセレクションを返します。 このメソッドはdataオペレータに対してだけ働きます、なぜなら、dataオペレータだけが3つの仮想セレクションを返すからです。

var p = d3.select("#ins02").selectAll("p")
  .data(theData)
  .enter()

この場合、対応するDOM要素が存在していないデータの各要素のために、 置き場としての要素(ノード)への参照を返します。

一度参照できれば、その要素に対して操作ができます。

しかし、この参照は要素に対して、append、insert、selectオペレータを使えるということです。

.enter()セレクションにこれらのオペレータを実行することで、 この要素を扱えます。

Append Operator Revisited

var p = d3.select("#ins02").selectAll("p")
  .data(theData)
  .enter()
  .append("p")

enter()セレクションに対して .append("p")を実行します。

前のステップで作成された不足分の置き場所に、p要素が挿入されます。

データ配列に3つのデータがあり、ウェッブページにはp要素はないので、 .append("p")は、3つのp要素を作成し追加します。

例では、appendオペレタが実行された後、3つのp要素を返します。

Text Operator

var p = d3.select("#ins02").selectAll("p")
  .data(theData)
  .enter()
  .append("p")
  .text("Hi")

textオペレータは、選択されたすべての要素のテキストコンテントに指定された値を設定します。

例では、.text("Hi")で、その値は "Hi"です。 3つの<p>要素が選択されているので、各要素は"Hi"をその中に取り込みます。

データはどこへいった?

var theData = [1,2,3]

JavaScriptのデータ配列で始まったこの例は、"Hi" を表示する3つのパラグラフで終了しています。

1、2、3はどうしたのでしょうか?

データ オペレータをもう一度

var theData = [ 1, 2, 3 ];

var p = d3.select("#ins01").selectAll("p")
      .data(theData)
      .enter()
      .append("p")
      .text("Hi ");

   console.log(p); 
    
    // JavaScript Console
    Array[3]
    0: HTMLParagraphElement
    1: HTMLParagraphElement
    2: HTMLParagraphElement
      __data__: 3
      align: ""
      attributes: NamedNodeMap

上記を実行すると、コンソールに、3つのp要素が追加されています。

3つ目の要素を開くと、中にプロパティ名__data__ 値3があります。

データが要素に割り当てられると、データはプロパティ__data__に保存されます。

このことがデータを__data__プロパティにくっつけて利用できるようにしています。

これが、データをDOM要素につなげると言うことです。