关闭标签后追加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元素。

希望这可以帮助！