D3图中的垂直线在缩放/平移时移动答案

【问题标题】：Vertical line in D3 plot move on zoom/panD3图中的垂直线在缩放/平移时移动
【发布时间】：2017-11-07 10:30:32
【问题描述】：

我正在尝试在 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），但没有一个包含我在图表中的缩放/平移功能。

如果您需要更多信息，请告诉我，谢谢！

【问题讨论】：

标签： javascript css d3.js

【解决方案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

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

这是modified example。

【讨论】：