連想配列

d3の配列を定義する時に、連想配列にすると便利な場合があります。一般的に配列の各要素の値を参照するには、配列名[インデックス番号]のインデックス番号を指定します（例：array[0]）。しかし、例えば果物の名前と値段といったように、インデックス番号の代わりに文字列が使えると、配列を辞書のように使うことが可能になります。このインデックス部分に文字列（キー）を設定し、キーに対応する要素のデータを参照する形の配列を「連想配列」と呼びます。この連想配列は、多くのプログラミング言語で利用することができますが、言語によってはディクショナリやハッシュマップなどとも呼ばれます。
それでは、以下の連想配列を使ったコードを描いてみましょう。

var dataset = [ { key: "apple", value: 150},     //連想配列を使う
                { key: "orange", value: 200 },     //keyとvalueがセットになっている
                { key: "banana", value: 100 },
                { key: "lemon", value: 120 },
                { key: "grape", value: 250 }];
 
var body =  d3.select("body");
 
body.selectAll("div")
   .data(dataset)          //データの要素数をカウントし抽出
   .enter()                //DOM要素がデータの要素数より少ない場合は新しく空のDOM要素を作る。
   .append("div")            //新しく作ったDOM要素に<p></p>を追加。
   .text(function(d){      //<p></p>の中に<text></text>を追加。
      return "keyは" + d.key + "、valueは" + d.value + "になります";
   });

以下の結果になります。

key_value_start

次に、連想配列のkeyがbananaの配列を削除して更新してみます。

//クリックするとdatasetを更新して要素数を4にする////////////////////
d3.select(".blue")
   .on("click", function() {
 
      //datasetの新しい値
      var dataset = [ { key: "apple", value: 150},     //連想配列を使う
                      { key: "orange", value: 200 },     //keyとvalueがセットになっている
                      { key: "lemon", value: 120 },
                      { key: "grape", value: 250 }];
 
      var divs = body.selectAll("div") //divのDOM要素が4になるように選択し直す。
         .data(dataset)
         .style("color", "blue");
   });

当然ですが、要素数が4に減ったので、5つ目のgrapeは黒のままです。

これは、更新されたdatasetの要素数が4のため、初めから数えて4つ目までが選択されて更新されたからです。しかし、削除したbananaの箇所だけ黒のまま残したい場合もあるでしょう。その場合は、data()メソッドの中でd.keyを使い、既存のDOM要素と同じkeyがある要素だけを選択します。

//クリックするとdatasetを更新して要素数を4にする////////////////////
d3.select(".blue")
   .on("click", function() {
 
      //datasetの新しい値
      var dataset = [ { key: "apple", value: 150},     //連想配列を使う
                      { key: "orange", value: 200 },     //keyとvalueがセットになっている
                      { key: "lemon", value: 120 },
                      { key: "grape", value: 250 }];
 
      var divs = body.selectAll("div") //divのDOM要素が4になるように選択し直す。
         .data(dataset, function(d){   //既存のDOM要素とkeyが同じものだけを選択する。
            return d.key;
         })
         .style("color", "blue");
   });

bananaの行だけが更新されず黒のままになりました。

key_value

配列の追加、削除

配列の末尾への追加はpushです。

1	array.push({key: "tomato", value: 100});

配列の先頭の要素の削除はshift()で、末尾の要素の削除はpop()です。

1 2	array.shift(); //配列の先頭の要素を削除 array.pop(); //配列の末尾の要素の削除

配列の中間の要素の削除はsplice()を使います。以下の例は、keyがbananaの場合に、配列の要素を削除します。連想配列にする利点の一つと言えます。

例： array.splice(インデックス番号, 削除する個数);
 
for(var i = 0; i < dataset.length; i ++){
  if(dataset[i].key == "banana") dataset.splice(i,1);
}

配列を挿入する場合にもspliceを使います。以下の例は、インデックス番号3の場所に「{ key: “tomato”, value: 100 }」を挿入しています。

1
2
3

例：array.splice(インデックス番号, ここは0, 挿入する値)
 
dataset.splice(3, 0, {key: "tomato", value: 100})