D3更新画笔的比例不更新画笔

Question

我想在D3 3.5.6 版本中创建一个可缩放、可刷的时间轴。现在我没有使用 D3 的缩放行为，而只是使用了两个缩放按钮。我的问题如下：单击按钮时，我更新比例并重绘轴和画笔。由于某种原因，画笔不会更新范围矩形和手柄，而只会更新背景。我知道我实际上并没有更新画笔的.extent()。但是当比例改变时画笔不应该更新吗？

这是代码的相关部分。其余的可以在 this fiddle.

中找到

document.getElementById('in').addEventListener('click', zoom.bind(null, .1));
document.getElementById('out').addEventListener('click', zoom.bind(null, -.1));

function zoom(step) {
  var offset;

  zoomScale += step;

  if(zoomScale < 1)
    zoomScale -= step;

  offset = (zoomScale * width - width) / 2;

  // updating the scale
  xScale
    .range([-offset, width + offset]);

  // redrawing the brush which doesn't seem to have effect I expected
  brushGroup
    .call(brush);

  // redrawing the axis which works fine
  xAxisGroup
    .transition()
    .call(xAxis);      
}

非常感谢！

Answer 1

我在你的缩放功能中发现了问题，你将 xScale 范围重新定义为

 xScale
    .range([-offset, width + offset]);

之后你需要把它传到这里

brush = d3.svg.brush()
          .x(xScale) // This need new Values 
          .extent([.1, .6]),

比后你可以打电话重新画你的时间线

 brushGroup
        .call(brush);

这里是fiddlehttps://jsfiddle.net/azksfjjw/4/

Answer 2

显然您需要重置画笔的范围，因此内部 xExtent 和 yExtent 变量被重置。对我来说似乎是个错误。

brush.extent(brush.extent());

https://jsfiddle.net/azksfjjw/6/

Answer 3

我也遇到了同样的问题，删掉刷组再调用就解决了

调整图表大小之前：

var brush = d3.brushX().extent([[0, 0], [graph_dim.w, graph_dim.h]]).on("end", brushended);
graphContent.append("g").attr("class", "brush").call(brush);

图表大小调整后：

// update graph height 
graph_dim.h = my_new_graph_height;

// update brush extent
brush.extent([[0, 0], [graph_dim.w, graph_dim.h]]);
graphDIV.select(".brush").remove();
graphContent.append("g").attr("class", "brush").call(brush);

可能不是最好的方法，但它有效:-)

请注意，如果您在同一图表上有鼠标事件，它们将不再可用（画笔将 "cover" 它们）——参见 this answer。

D3更新画笔的比例不更新画笔

D3 updating brush's scale doesn't update brush

javascript

d3.js

svg

data-visualization