D3正在更新画笔's刻度没有更新画笔

D3 updating brush's scale doesn't update brush

本文关键字：画笔 更新 D3      更新时间：2023-09-26

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

下面是代码的相关部分。

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

非常感谢!

显然你需要重置刷的范围，所以内部的xExtent和yExtent变量被重置。对我来说好像是个bug。

brush.extent(brush.extent());
https://jsfiddle.net/azksfjjw/6/

我抓住了你的缩放函数的问题，你重新定义xScale范围

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

之后你需要把它传递到这里

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

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

 brushGroup
        .call(brush);

这里提琴https://jsfiddle.net/azksfjjw/4/

我有同样的问题，并通过删除画笔组并再次调用它来修复它。

调整图形大小前:

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

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

注意，如果你在同一图形上有鼠标事件，它们将不再是可访问的(笔刷将"覆盖"它们)——参见这个答案

相关文章：