我的堆积面积图如下所示:
我使用的数据具有相同数量的值,就像在示例中一样.我使用的数据是:http://pastebin.com/D07hja76
我使用的代码也几乎与选择器类似:
var colors = d3.scale.category20(); keyColor = function(d, i) {return colors(d.key)}; nv.addGraph(function() { chart = nv.models.stackedAreaChart() .useInteractiveGuideline(true) .x(function(d) { return d.t }) .y(function(d) { return d.v }) .color(keyColor) .transitionDuration(300) chart.xAxis .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) }); chart.yAxis .tickFormat(d3.format(',.0f')); d3.select('#browserBreakdown') .datum(browserchartdata) .transition().duration(500) .call(chart) .each('start', function() { setTimeout(function() { d3.selectAll('#browserBreakdown *').each(function() { if(this.__transition__) this.__transition__.duration = 1; }) }, 0) }) nv.utils.windowResize(chart.update); return chart; });
如何让图表看起来正确?
NVD3图表不会沿着x轴将数据点按从左到右的顺序排序,因此您将获得奇怪的纵横交错形状.
我假设有一些方法可以告诉NVD3对数据进行排序,但它们旁边没有文档,我无法快速解决.相反,您可以使用此函数对数据进行排序,然后再将其添加到图表中:
data.forEach(function(d,i){ d.values = d.values.sort( function(a,b){ return +a.t -b.t; } ); });
这是如何工作的:
data
是JSON文件中的对象数组(您可以使用browserchartdata
);
Javascript Array.forEach(function(){})
方法为数组的每个元素调用传入函数,并将该函数传递给数组的元素及其索引;
Javascript Array.sort()
方法使用传入函数创建数组的排序版本,以确定两个元素(a
和b
)的比较方式;
我创建的sort函数使用.t
数组中每个元素的变量(你用于x轴)确定是否a
大于b
(因此应该在排序数组中继续);
我在values
每个数据行的数组上调用此sort函数,然后对未排序的values
数组进行写操作,以便data
所有对象最终根据其从最小到最大的值排序t
.
我在NVD3的"实时代码"网站上尝试了你的数据,它看起来很好.