Javascript 带取景器d3.js的条形图

如何在d3.js中为条形图提供取景器功能。带取景器的图表是这样的，我想集成取景器功能的条形图是这样的。有人能帮我吗。我找了整整一周，什么也找不到

您要查找的内容尚未内置到库中。您最好看一下：

克隆回购协议并使用focuschart.js构建您自己的模型吧我相信他们会喜欢拉取请求：]

您可以在d3.js中找到关于如何构建条形字符的教程：

您可以阅读协调视图：

---

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

从nvd3.org下载文件，使用文件行plusbarwithfocuschart.html。 我们必须编辑它

我的建议是删除线条部分的数据，以便只存在条形图数据

数据输入，例如：

最后要删除折线图的轴数据：

您可以从文件nvd3.js-Line num:6871中关闭图例，其中定义了model:linePlusBarWithFocusChart

将showLegend=false

在同一型号下的nvd3.js中的showTooltip函数下

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

---

请随时询问任何疑问。

给我一些如何实现的想法。nvd3 1.7.0将linePlusBarChart和linePlusBarChart与Focus模型结合在一起。

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

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