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

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

brush.extent(brush.extent());

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

Answer 2

我在缩放功能中发现了您将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/

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

可能不是最好的方式，但它有效： - ）

请注意，如果您在同一图表上有鼠标事件，则无法再访问它们（画笔将“覆盖”它们） - 请参阅this answer。

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

3 个答案: