Question

我通过刷子使用Focus + Context的条形图有些问题。它的效果很好，但我的问题是：

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

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

Answer 2

试试这段代码，

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

x.ticks（）将给出刻度数组，.length将给出刻度数。计算条宽。总宽度乘以刻度数，这将给出刻度线之间的空间，该刻度必须是条宽。

请参阅更新fiddle

希望这对你有用，如果没有问我更多...... 添加了一些代码以便更好地处理。

D3.js通过刷新条形图聚焦+上下文 - 刷新时重新计算条形宽度

2 个答案: