如何在d3.js中为条形图提供取景器功能。带有取景器的图表就像这个http://nvd3.org/ghpages/lineWithFocus.html一样,我希望整合取景器功能的条形图就像这个http://nvd3.org/ghpages/multiBar.html。谁能帮我这个。我正在寻找整整一周而且无法得到任何东西。
答案 0 :(得分:2)
其实你可以,但你必须做到。 它非常简单!
从nvd3.org下载文件。取文件" linePlusBarWithFocusChart.html"。 我们必须编辑它。
建议删除行部分的数据,以便仅存在条形数据。
通过示例输入数据:
var testdata = [{
"key": "Quantity",
"bar": true,
"values": [
[1136005200000, 1271000.0],
[1138683600000, 1271000.0],
[1141102800000, 1271000.0],
etc. .]
}, {
"key": "Price", //Line chart data values are to be deleted.
"values": [
]
}]
最后删除折线图的轴数据:
chart.y2Axis
.tickFormat(function(d) {
// return '$' + d3.format(',.2f')(d) //what was present in the example
return '';
});
chart.y4Axis
.tickFormat(function(d) {
// return '$' + d3.format(',.2f')(d) //what was present in the example
return '';
});
您可以从nvd3.js文件中删除图例 - 行号:6871,其中定义了model:linePlusBarWithFocusChart。
put showLegend = false;
在同一型号下的nvd3.js中的showTooltip函数下。
var showTooltip = function(e, offsetElement) {
if (extent) {
e.pointIndex += Math.ceil(extent[0]);
}
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
top = e.pos[1] + ( offsetElement.offsetTop || 0),
x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
y = (e.series.bar ? y1Axis : y1Axis).tickFormat()(lines.y()(e.point, e.pointIndex)),
content = tooltip(e.series.key, x, y, e, chart);
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
};
现在,运行该文件,您会发现只存在条形图。 这可能不是正确的方法,但它可以在困难的情况下帮助。 您可能还需要编辑一些不需要的元素。
随意提出任何疑问。
答案 1 :(得分:0)
您所寻找的内容尚未内置到库中(尚未)。您最好的选择是:https://github.com/novus/nvd3/blob/master/src/models/lineWithFocusChart.js
克隆回购并建立自己的模型barWithFocusChart.js(我确定他们喜欢拉取请求:])
您可以在d3.js中找到有关如何构建条形码的教程: http://mbostock.github.io/d3/tutorial/bar-2.html
您可以阅读协调的观点: http://square.github.io/crossfilter/