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