如何在NVD3的MultiBarChart中从data-Y计算screen-Y?

时间:2012-09-07 09:45:39

标签: javascript json svg d3.js bar-chart

我正在使用NVD3库来显示堆叠的multiBarChart。我还需要在每个条上添加一条水平线(---)以指示平均值的位置。

我认为最后一组数据(系列)是平均值。

test_data = [
    {"key":"Series 1",  "values":[{"x":0,"y":30},{"x":1,"y":15},{"x":2,"y":10}]},
    {"key":"Series 2",  "values":[{"x":0,"y":2},{"x":1,"y":7},{"x":2,"y":3}]},
    {"key":"Average","values": [{"x":0,"y":6},{"x":1,"y":4},{"x":2,"y":40}]}
];

我设法选择了最后一个系列,并将其高度更改为1来模拟一条线而不是一个方形。我还设法通过改变'y'的值来垂直控制线的位置:

var lastBars = $('.nv-group:last rect');
lastBars.attr('height', 2);
lastBars.attr('y',function(a, y, c){
    return parseFloat(y) + 50;
});

为了将“水平线”放置在屏幕右侧的Y上,我需要找出如何将数据提供的“y”缩放到屏幕上相应的“Y”,以便与正确的值对齐Y轴。

我正在阅读NVD3的源代码,似乎它正在使用yDomain和yScale来计算screen-Y值,但我不知道如何使用它们以及如何从库代码外部访问它们。 / p>

有什么想法吗?

0 个答案:

没有答案