Javascript D3 js-单击圆圈，我想在其背景中添加区域

我有一个d3图表，在点击圆圈的图表中，我使圆圈的大小变大

d3。选择（this）.attr（“r”，9）

我的要求是我想在下图所示的圆圈顶部添加蓝色背景区域


我试图添加一个背景上有颜色的区域，但它不起作用。请向我推荐。谢谢

我的点击代码-

.on("click", function(d) {
        d3.selectAll(".green-circle").attr("r", 5);
        d3.selectAll(".red-circle").attr("r", 5);
        d3.select(this).attr("r", 9);
      })

我尝试在单击时添加line onClick，但它会在圆圈内添加内容。我也尝试获取parentNode，但没有成功

  d3.select(this).append("line")
              .attr("id", "focusLineX")
              .attr("class", "focusLine");

<circle cx="568.2359387326708" cy="100" r="9" class="green-circle" style="fill: transparent; stroke: black; stroke-width: 0.25;">
<line id="focusLineX" class="focusLine"></line>
</circle>

d3.选择（此）.append（“行”）
.attr（“id”、“focusLineX”）
.attr（“类”、“焦点行”）；

我的代码沙盒-
您需要将新对象添加到图表中，而不是添加到圆中。根据您共享的代码（感谢您这么做，这样可以更容易地提供帮助！），您应该添加到
g
对象

我不确定我所做的更改是否反映了这些更改，我想您可能看不到这些更改，因此以下是我到目前为止所做的更改：

在某个地方声明一个
rect
变量，我在
newX
变量之后就这样做了：

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

然后在“单击”功能中，将此代码放在开头：

    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
fill的矩形，但请随意使用这些样式，这只是为了让您了解如何完成所需的工作

我希望这是有益的，让我知道如果你有任何问题

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

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

*更新2*
因此，要使缩放和滚动都正常工作，您需要在任何地方使用
newX
函数，因为该函数提供了根据缩放和滚动值更新的
x
坐标

另外，在
updateChart
函数中，还需要减去列宽的一半，这样列就不会向右跳转

可以找到工作代码：
矩形在缩放和滚动之后出现问题，我正在尝试解决该问题。感谢您的评论，让我检查一下。对于您所做的更改，您可以共享从我的代码沙盒创建的代码沙盒。我已经在codesanbox中添加了您的代码，唯一的问题是我看到的是这不适用于缩放功能。啊，我看到了，这很容易修复，这是指向工作代码的链接，另外我正在更新我的答案，并提供详细信息：