Javascript d3折线图中的笔刷功能未按预期工作

我在d3折线图中实现的笔刷和缩放功能未按预期工作

我点击了这个链接-

我面临的问题是——

图表并没有显示所有的值，我有4个数据，但它只显示3个数据 点击圆点后，我将显示不随笔刷功能移动的矩形 小事情，但图表总是开箱即用

我的代码沙盒-

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

---

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

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

这意味着您必须将绘图移到右侧。不幸的是，按照您对图表进行编码的方式，您没有为主图表添加一个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像素的翻译。尽管我在分解svg时遇到了困难。我认为这应该给你一个想法。检查轴是否与时间点匹配

检查

更新

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

更新2

在浏览了注释中的codesandbox之后，我能够添加代码，将矩形更新为刷牙常量，如下所示，以使矩形也随着刷牙而移动：

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

---

我已经给了几乎50像素的平移到我的其他元素，它看起来不错，使矩形和线条的变化与画笔一起移动我正在尝试使矩形和线条的变化与画笔一起移动，但是我面临一些困难，你能检查一下我的代码吗？沙盒请引导我。谢谢你的指导。让我看看。如果你还有其他问题，一定要告诉我。如果没有，请将其标记为已回答。检查此项。您应该只追加一次该行，然后根据需要进行更新。由于clickLine的数据没有在画笔中传播，也没有绑定到该行，因此我使用属性data time将数据附加到clickLine。然后在画笔中，我检索这个值并使用它来计算新的x1和x2位置。也请注明答案。