带视图查找器的条形图d3.js

Bar Chart With View Finder d3.js

本文关键字：条形图 d3 js 视图 查找      更新时间：2023-09-26

如何在d3.js中为条形图提供取景器功能。带取景器的图表是这样的http://nvd3.org/ghpages/lineWithFocus.html我想集成取景器功能的条形图是这样的http://nvd3.org/ghpages/multiBar.html.有人能帮我做这件事吗。我找了整整一周都找不到任何东西。

实际上你可以，但你必须做到。而且很简单！

从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-Line num:6871中关闭图例，其中定义了model:linePlusBarWithFocusChart。

将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);
  };

现在，运行该文件，您可以发现只有条形图存在。这可能不是一个合适的方法，但在严峻的情况下会有所帮助。您可能还需要编辑掉一些不需要的元素。

请随时提出任何疑问。

您要查找的内容尚未构建到库中。你最好看看：https://github.com/novus/nvd3/blob/master/src/models/lineWithFocusChart.js

克隆repo并构建自己的模型barWithFocusChart.js(我相信他们会喜欢pull请求：](

您可以在d3.js中找到关于如何构建bar char的教程：http://mbostock.github.io/d3/tutorial/bar-2.html

你可以阅读协调一致的观点：http://square.github.io/crossfilter/

相关文章：