D3で最も苦労しているのは、既存のモデルにプラグインする前に、適切なデータ操作です。私は時間ベースのx軸で基本的なD3エリアチャートを作成するために必要な最小限のデータ操作を理解しようとしています。私はdate
キーとDateオブジェクトのプロパティを持つオブジェクトのJSON配列と、チャートを設定するためのいくつかの他のキーと値のペアから始めています。例えばD3エリアチャートを作成するためのJSONデータの適切な操作ですか?
:
[{date: Wed Jul 20 2016 00:00:00 GMT-1000 (HST), a: 5, b: 1, c: 9, nothankyou: 90},
{date: Wed Jul 21 2016 00:00:00 GMT-1000 (HST), a: 7, b: 2, c: 10, nothankyou: 70},
{date: Wed Jul 22 2016 00:00:00 GMT-1000 (HST), a: 6, b: 5, c: 3, nothankyou: 50},
...etc...]
目標は、x軸に沿ってy軸と時間(date
)に沿ってa
、b
、及びc
の値を持つエリアチャートを作成することです。 nothankyou
など不要なデータポイントをフィルタリングする必要があります。
これまで同じように別のプロジェクトのデータを操作するためにd3.nest
を使用していましたが、データがすでに日付別に整理されているところで過度に使用されていませんか?
D3エリアチャート自体は非常に簡単です(それはデータを想定して)(d3.nestされている - すでに編):
var format = d3.time.format("%Y-%m-%d");
var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 450 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom,
delay = 500,
duration = 750;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var z = d3.scale.category20c();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.months);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var stack = d3.layout.stack()
.offset("zero")
.values(function(d) { return d.values; })
.x(function(d) { return d.date; })
.y(function(d) { return d.value; });
var nest = d3.nest()
.key(function(d) { return d.key; });
var area = d3.svg.area()
.interpolate("cardinal")
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var svg = d3.select(".areaChart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
totalCrimeData.forEach(function(d) {
d.date = format.parse(d.date);
d.value = +d.value;
});
var layers = stack(nest.entries(data));
console.log("layers",layers);
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
svg.selectAll(".layer")
.data(layers)
.enter().append("path")
.attr("class", "layer")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d, i) { return z(i); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);