javascript - D3.js Focus+Context via Brushing Barchart - 重新计算刷牙时的 BarWidth

Question

我通过刷牙使用焦点+上下文的条形图遇到一些问题。它工作得很好，但我的问题是:

当我处理数据时，我用 bin 计算条宽和图表的宽度。

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

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

为了保持连贯性，在刷焦点图上的条宽时应该增加(目前保持相同的宽度)。所以我需要重新计算条宽。但我不知道我该怎么做......

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/

function brushed() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  var b = x(data[1].x)-x(data[0].x);
  var w = b-2;
  focusGraph.attr("x", function(d, i) { return x(d.x); });
  focusGraph.attr("width", w);

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