0
D3与D3最大的冲突是将数据插入现有模型之前的正确数据处理。我试图找出用基于时间的x轴创建基本D3面积图所需的最少量的数据操作。我开始使用带有date
键和Date对象属性的JSON数组对象以及其他几个键值对来填充图表。正确处理JSON数据以创建D3区域图表?
例如:
[{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...]
的目标是创建具有值的区域图表a
,b
,和c
沿着x轴,y轴和时间(date
)。需要过滤掉不需要的数据点,如nothankyou
。
我以前使用d3.nest
来类似地操纵另一个项目中的数据,但它不是过度杀伤数据已按日期组织的地方?
D3的区域图本身是相当简单的(它假定该数据已经d3.nest() - ED的话):
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);