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放置在位置上，类似于放置原始rect元素的方式。
或者，您可以将每个原始rect元素嵌套在每个g中，然后放置g元素。然后，您无需分别定位相关的rect元素。

希望这会有所帮助！

关闭标签后追加rect

1 个答案: