条形图与查找Finder d3.js [英] Bar Chart With View Finder d3.js

问题描述

如何在条形图的d3.js中提供取景器功能。带有查找器的图表如下所示： http://nvd3.org/ghpages/lineWithFocus.html 而我想集成view finder功能的条形图就像这样 http://nvd3.org/ghpages/multiBar .html 。谁能帮我这个。我在寻找整周，不能得到任何东西。

How to provide viewfinder Functionality in d3.js for bar-chart. the chart with view finder is like this http://nvd3.org/ghpages/lineWithFocus.html and the bar chart i want to integrate view finder function is like this http://nvd3.org/ghpages/multiBar.html. can any one help me with this. i am searching for whole week and couldn't get any thing.

推荐答案

实际上你可以，但你必须做。

Actually you can, but you have to make it. And its pretty simple!

从nvd3.org下载文件取出文件linePlusBarWithFocusChart.html。
我们必须编辑它。

Download the files from nvd3.org Take the file "linePlusBarWithFocusChart.html". We have to edit that.

我们建议删除线部分的数据，以便只存在柱状图数据。

What am proposing is to remove the data for the line part,so that only the bar data exists.

通过示例输入的数据：

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

You can turn the legends off from the file nvd3.js - Line num: 6871 where the model:linePlusBarWithFocusChart is defined.

放入showLegend = false;

Put showLegend=false;

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

Under showTooltip function in nvd3.js under the same model.

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

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

Right now ,run the file and you can find that only the bar chart exists. This may not be the proper method,but it helps out in dire situations. You may need to edit out some more unwanted elements as well.

随时询问任何疑问。

这篇关于条形图与查找Finder d3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！