關閉標簽后追加rect

Question

我有一系列rect，並想用另一個rect標記一個rect。

chart.rect
        .filter(function(d){
          return d.today != undefined
        })
        .append("rect")
        .attr('width', function (d) { return "100px"; })
        .attr('height', function (d) { return "100px"; })
        .attr('x', function (d) { return 5; })
        .attr('y', function (d) { return 5; })
        .attr('fill', function (d) { return "yellow"; });

但該rect出現在另一個rect中：

<rect width="1%" height="100%" stroke-width="1" stroke="black" x="3%" fill="green">
   <rect width="100px" height="100px" x="5" y="5" fill="yellow"></rect>
</rect>

有誰知道，如何在結束標記后添加元素？

Answer 1

您可以訪問選定節點的父節點，並將新的rect附加到該節點。

未經測試，類似這樣的東西應該可以工作：

chart.rect
  .filter(function(d){
    return d.today != undefined
  }).each(function(d) {
    d3.select(this.parentNode)      
      .append("rect")
      .datum(d)
      .attr('width', function (d) { return "100px"; })
      .attr('height', function (d) { return "100px"; })
      .attr('x', function (d) { return 5; })
      .attr('y', function (d) { return 5; })
      .attr('fill', function (d) { return "yellow"; });
  })

這將為滿足過濾條件的每個節點添加一個黃色rect 。

要rect黃色rect您有兩種選擇：

1. 放置黃色rect方式與放置原始rect元素的方式類似。
2. 或者，您可以將每個原始rect元素嵌套在每個g ，然后放置g元素。 然后，您無需單獨定位相關的rect元素。

希望這可以幫助！