D3.js焦點+上下文通過刷新條形圖 - 在刷新上重新計算BarWidth

Question

我通過刷刷使用焦點+上下文的條形圖出現了一些問題。它工作得很好，但我的問題是：

我計算帶寬和我的圖形的寬度當我處理我的數據。

var data = d3.layout.histogram() 
      .bins(x.ticks(bins)) 
      (values); 

var numBins = data.length; 
var barWidth = parseInt((width)/numBins) - 1; 

爲了保持一致，刷新焦點圖上的條寬應該會增加（目前它保持相同的寬度）。所以我需要重新計算barwidth。但我不知道我怎麼可以這樣......

function brushed() { 

    x.domain(brush.empty() ? x2.domain() : brush.extent()); 
    focusGraph.attr("x", function(d, i) { return x(d.x); }); 
    focusGraph.attr("width", barWidth); // How can I calculate new barwidth? 

    focus.select(".x.axis").call(xAxis); 

} 

下面的代碼： http://jsfiddle.net/qcLp6qu8/

Answer 1

我找到一個解決方案，如果能夠幫助別人:)

http://jsfiddle.net/sx9myywh/

​​

Answer 2

試試這個代碼，

focusGraph.attr("width", width/(x.ticks().length)); 

x.ticks（）將給陣列的蜱，.length將給出蜱的數量。計算條寬。根據蜱數量的總寬度，這將給出蜱之間的間距，其必須是條寬。

查看更新fiddle

希望這會爲你工作，如果沒有問我要更多... 添加一些代碼，爲了更好的處理。