javascript - 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 对象。

我不确定我所做的更改是否已反射(reflect)出来，我想你看不到它们，所以这是到目前为止我所做的更改:

在某处声明一个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