在我的 d3 图表中，当我更改画笔并单击未选择的范围时，缩放选择消失了

Question

In my d3 chart, Zoom selection disappears when I change the brush and click on not selected range.

This is my working code - https://codesandbox.io/s/eager-shirley-cxq99

When I changed the selection above and clicked on unselected selection zoom selection disappear.

Please guide me what is wrong with my code.

Answer 1

Just un-comment this part in your code to actually produce the zoom rect, which gets used in the brushed function.

    svg
      .append("rect")
      .attr("class", "zoom")
      .attr("width", containerWidth - 20)
      .attr("height", height)
      .attr("transform", "translate(0,20)")
      .call(zoom);

See working codesandbox.io