javascript - 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") 将不会生成预期的结果，因为引用了 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 .