我的堆积面积图如下所示:
我使用的数据具有相同数量的值,就像示例中一样。我使用的数据位于: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 对数据进行排序,但他们几乎没有文档,我无法快速弄清楚。相反,您可以使用此函数对数据进行排序before您将其添加到图表中:
data.forEach(function(d,i){
d.values = d.values.sort(
function(a,b){
return +a.t -b.t;
}
);
});
这是如何运作的:
data
是 JSON 文件中的对象数组(您可以使用browserchartdata
);
JavaScriptArray.forEach(function(){})
方法为数组的每个元素调用传入的函数,并向该函数传递数组的元素及其索引;
JavaScriptArray.sort()
方法使用传入的函数创建数组的排序版本,以确定两个元素 (a
and b
) 比较;
我创建的排序函数使用.t
数组中每个元素的变量(用于 x 轴)来确定是否a
大于b
(因此应该在排序数组中追随它);
我称这个排序函数为values
每个数据行的数组,然后覆盖未排序的values
数组,这样里面的对象data
所有的值最终都根据从最小到最大的顺序排序t
.
我在 NVD3 的“实时代码”网站上用您的数据进行了尝试,看起来不错。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)