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

Question

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

我点击了此链接 - https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f ,

我面临的问题是 -

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

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

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

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

Answer 1

您的第一个点位于您的剪辑区域后面。例如，如果右键单击第一个可见的圆圈并检查元素，您将看到 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 px 转换。虽然我很难解构你的 svg。我想这应该能给你一个想法。检查轴是否也与时间点匹配。

检查code sand box

更新

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

更新2

浏览完评论中提供的codesandbox后，我能够添加代码以将矩形更新为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.