带查看器的条形图d3.js

如何在d3.js中为条形图提供取景器功能。与取景器的图表是这样的http://nvd3.org/ghpages/lineWithFocus.html和条形图我想集成取景器功能是这样的http://nvd3.org/ghpages/multiBar.html。谁能帮我这个。我正在寻找整整一周，无法得到任何东西。带查看器的条形图d3.js

来源

2013-02-26 user1184777

给我如何实现它的一些想法。 – user1184777 2013-03-05 04:34:55

你在找什么不是内置于图书馆（还）。最好的办法是看看：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/

来源

2013-05-01 20:59:27 WolfgangCodes

nvd3 1.7.0组合linePlusBarChart和linePlusBarChartWithFocus模型。 – ahmadalibaloch 2017-08-10 03:49:54

其实你可以，但你必须做到这一点。而且它非常简单！

从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被定义。

Put showLegend = false;

下showTooltip功能在同一个模型下nvd3.js。

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

现在，运行该文件，你会发现只有条形图存在。这可能不是正确的方法，但它有助于在可怕的情况下。您可能还需要编辑一些更多不需要的元素。

随意问任何怀疑。

来源

2014-08-27 07:03:59

带查看器的条形图d3.js

回答

相关问题