D3绘图中的垂直线在缩放/平移上移动

Question

我想在D3中绘制一个垂直线标记。它以此示例为模型：https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

我的问题是，在我绘制线后，它不会随着我缩放/滚动图形而移动。示例如下所示：

目前，我将其计算为d3.area()。

this.pastDateArea = d3.area()
    .x(function(d) { return this.x(this.props.pastDate.toDate()) }.bind(this))
    .y0(0)
    .y1(function(d) { return this.height }.bind(this))

附加为

var pastDateData = [{x:this.props.pastDate.toDate(), y:150}]
this.focus.append("path")
    .datum(pastDateData)
    .attr("class", "area")
    .attr("d", this.pastDateArea)

并使用

进行缩放/刷新

//zoom
var t = d3.event.transform;
this.x.domain(t.rescaleX(this.x2).domain());

//brush
this.svg.select(".zoom").call(this.zoom.transform, d3.zoomIdentity
    .scale(this.width / (s[1] - s[0]))
    .translate(-s[0], 0));

我知道这个问题有类似的问题（即Draw a vertical line representing the current date in d3 gantt chart），但其中没有一个包含我在图表中的缩放/平移功能。

如果您需要更多信息，请与我们联系并致谢！

Answer 1

问题是您没有使用每个缩放事件更新垂直条。使用您显示的示例的代码，在图表缩放时会完成一些操作，包括您注意到：

  x.domain(t.rescaleX(x2).domain());     // update x scale
  focus.select(".area").attr("d", area); // redraw chart area

虽然您确实为新区域指定了area的类，但是d3.select将仅选择第一个匹配的元素。因此，在缩放时，只更新一个.area元素（第一个遇到，通常是第一个附加）。但是，用d3.selectAll(".area")替换它不会产生预期的结果，因为引用的区域函数（.attr("d",area)）仅用于第一个区域（图形的区域，而不是垂直条形区域）。

解决方案是独立选择每个区域（图表和条形图）并使用各自的区域生成器更新区域。为此，请使用唯一的类名称或id附加垂直条，然后使用它来稍后选择它。然后在缩放或刷子上更新图形时，您可以使用：

  x.domain(s.map(x2.invert, x2));              // update x scale
  focus.select(".area").attr("d", area);       // redraw chart area
  focus.select(".bar").attr("d", pastDateArea);// redraw vertical bar

请记住，缩放和画笔都需要这样做。此外，在给定的示例中，在.area的css中指定了剪辑路径，因此您还需要牢记这一点。

这是modified example。