d3.jsな日々

d3.jsでデータ可視化する際の覚書です

dataとkey

通常、.data()の中身は単純な配列を入れる。1次元でも2次元でも、配列であることには変わらない。配列の要素はインデックスで指定するが、これは、0,1,2,....,nの数値である。
一方、任意の名前でデータの要素を指定したいことがある。これをd3.jsで実現するのがkeyである。

var dataset = [{key:0, value:10},
        {key:1, value:5},
        {key;2, value;18],
        .................
];

dataset自体は配列([]で指定)、中身の各要素はオブジェクト({}で指定)となる。オブジェクトの中の、key, valueと言った名前は任意に指定できる。

注意するのは、keyを使う場合、データは'd'のように直接取り出せない。'd.value'のように指定する必要がある。

var key = function(d) {
        return d.key;
}
var yScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d) { 
        return d.value;
})]);
....
.data(dataset, key)  //上で定義したkey関数でdatasetをバインド
......

key関数を定義せずに

.data(dataset, function(d){
        return d.key;
})

としてもよい