Question

我正在尝试在嵌套图层中添加一个矩形，用于我正在整理的svg堆叠图表。

首先，我有以下内容：

layers = svg.selectAll('g.layer')
    .data(stacked, function(d) {
        return d.dataPointLegend;
    })
    .enter()
    .append('g')
    .attr('class', function(d) {
        return d.dataPointLegend;
    });

layers.selectAll('g.layer')
    .data(function(d) {
        return d.dataPointValues;
    })
    .enter()
    .append('g');

在DOM中呈现<g class="someclass"><g></g></g>

我想要做的是，dataPointValues集合中的每个数据点以及rect和text元素。

我试过了

layers.selectAll（ 'g.layer'） .data（function（d）{ return d.dataPointValues; }）。输入（） .append（ 'RECT'）;

我知道这是错的，因为我最终

<g class="someclass"><g></g><rect></rect></g>

我想要的是

<g class="someclass"><g><rect></rect></g></g>

因此，当附加第二级图层时，如何添加下一级rect元素？

这看似过度嵌套，但我希望每个数据点有一个图层，因为每个数据点可能有一个或多个元素代表它。

由于

Answer 1

你非常接近得到你想要的东西。唯一缺少的是为layers使用另一个变量。这是片段：

首先，对于创建外部组，它与您完全一样：

var layers = svg.selectAll("g.layer")
        .data(/*whatever*/)
        .enter()
        .append("g");

然后，我们不再使用layers，而是创建另一个变量：

var innerLayers = layers.selectAll("g.layer")
        .data(/*whatever*/)
        .enter()
        .append("g");

这将在组中创建组。最后，我们使用innerLayers附加rects：

innerLayers.selectAll(".rects")
        .data(/*whatever*/)
        .enter()
        .append("rect");

这样做，你有你想要的东西：

<g class="someclass"><g><rect></rect></g></g>

如何将元素追加到嵌套层

1 个答案: