D3 js - onClick of circle 我想在它的背景中添加该区域

Question

我有一个 d3 图表，在点击圆圈的图表中，我使圆圈大小变大d3.select(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);
      })

我试图添加行 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>

我的代码沙盒 - https://codesandbox.io/s/polished-bush-iqvrx

Answer 1

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

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

在某处声明一个rect变量，我在newX变量之后就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填充的矩形，但可以随意使用这些样式，这只是为了让您了解如何做您正在寻找的东西。

我希望这对您有所帮助，如果您有任何问题，请告诉我。

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

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

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

同样在updateChart函数中，您还需要减去列宽的一半，以便该列不会向右跳。

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