D3 js-我想在背景的圆圈中添加圆的onClick

您需要将新对象添加到图表中，而不是圈子中。根据您已共享的代码（感谢您这样做，它使帮助变得更加容易！），您应该将其添加到g对象。

我不确定所做的更改是否已反映出来，我想您看不到它们，所以这是到目前为止我所做的更改：

在rect某个地方声明一个变量，我在newX变量之后做它：

// A function that updates the chart when the user zoom and thus new boundaries are available
var newX = "";
var rect;

然后在on("click")函数中，将此代码放在开头：

    if (rect) rect.remove();
    rect = g
      .append("rect")
      .attr("x", xScale(d.startTime) - 5)
      .attr("y", 0)
      .attr("width", 10)
      .attr("height", height)
      .attr("data", d.startTime)  // Need to save original x Position for scroll to work properly
      .style("fill", "navy");

我使用navy填充矩形，但可以随意使用样式，这只是为了让您了解如何做自己想要的。

希望对您有所帮助，如有任何疑问，请与我们联系。

*更新*另外，还需要在updateChart函数的末尾添加以下行，以使条形图与其余图形滚动：

  if (rect) rect.attr("x", newX(rect.attr("data")));

*更新2 *因此，要使缩放+滚动都正常工作，您需要在所有位置使用newX该功能，因为此功能提供了x根据缩放和滚动值更新的坐标。

此外，在该updateChart函数中，您还需要减去列宽的一半，以使列不会跳到右侧。

可以找到她的工作代码：CodeSandbox