帶查看器的條形圖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

回答

相關問題