我的 d3 折线图中的画笔功能未按预期工作

Question

我在 d3 折线图中实现的画笔和缩放功能没有按预期工作，

我点击了这个链接 - https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f，

我面临的问题是 -

图表未显示所有值，我有 4 个数据但它只显示 3 个数据 onClick of dot 我正在显示不随画笔功能移动的矩形 小事，但图表总是开箱即用

我的代码沙箱 - https://codesandbox.io/s/proud-firefly-xy1py

有人能指出我做错了什么吗？谢谢。

请告诉我我做错了什么，谢谢。

Answer 1

您的第一点是在您的clip 区域后面。例如，如果您右键单击第一个可见圆圈并检查元素，您将看到所有 4 个圆圈元素都存在于 dom 中。第一个圆形元素位于轴的后面。

这意味着你必须将你的情节向右移动。不幸的是，您编写图表的方式没有为主图表附加g 元素，然后将圆圈和路径附加到该g 元素。因此，这必须在多个地方进行。

首先我们将您的剪辑路径调整为：

   svg
      .append("defs")
      .append("SVG:clipPath")
      .attr("id", "clip")
      .append("SVG:rect")
      .attr("width", containerWidth)
      .attr("height", height)
      .attr("x", 40)
      .attr("y", 0);

接下来我们调整你的圈子

    scatter
      .selectAll(".foo")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "foo")
      .attr("transform", "translate(40,0)")

然后是你的线

    scatter
      .append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line)
      .attr("transform", "translate(40,0)");

您还必须为您的其他元素考虑这个40 px 翻译。虽然我很难解构你的svg。我认为这应该给你这个想法。检查轴是否与时间点匹配。

查看code sand box

更新

要使矩形随画笔移动，您必须向brushed const 函数添加代码，以使用更新的比例重新计算x、y、宽度和高度。

更新2

在查看 cmets 中提供的代码框后，我能够添加代码以将矩形更新为 brushed 常量，如下所示，以使矩形也随着刷亮而移动：

      // update rectangles
      scatter
        .selectAll(".rect-elements")
        .attr("x", d => {
          console.log(d);
          return xScale(d.startTime) - 12.5;
        })
        .attr("y", 0)
        .attr("width", 24)
        .attr("height", height + 5);

Full working Code Sandbox.