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

Question

My implementation for Brush & Zoom functionality in my d3 line chart is not working as expected,

I followed this link - https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f ,

Problems what I am facing is -

chart is not showing all the values, I have 4 data but it only shows 3 data onClick of dot I am showing the rect which is not moving with the brush functionality minor thing but chart always goes out of the box

My code sandbox - https://codesandbox.io/s/proud-firefly-xy1py

Can someone point out what I am doing wrong? thanks.

Please suggest me what I am doing wrong, thanks.

Answer 1

Your first point is going behind your clip area. For example, if you right click on the first visible circle and inspect element you will see all 4 circle elements are present in the dom. The first circle element is behind the axis.

This means you have to move your plot to the right. Unfortunately, the way you have coded the chart you have not appended a g element for the main chart and then appended the circles and path to that g element. As a result this has to be done in multiple places.

First we adjust your clip path as:

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

next we adjust your circles

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

and then your line

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

You will have to account for this 40 px translate for your other elements as well. Although I am having a hard time destructuring your svg. I think this should give you the idea though. Check the axis matches the time points as well.

Check the code sand box

Update

To make the rectangles move with the brush, you will have to add code to your brushed const function to recalculate the x, y, width and height using the updated scales.

Update2

After going through the codesandbox presented in the comments I was able to add the code to update the rectangles to the brushed const as below to make the rects also move with the brushing:

      // 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.