D3追加没有嵌套

d3 append without nesting

本文关键字：嵌套 追加 D3      更新时间：2023-09-26

我想在d3中创建以下内容:

<g>
    <rect class="rect1"></rect>
    <rect class="rect2"></rect>
</g>

我想做的是:

rectangles
    .selectAll('g')
    .data(data)
    .enter()
    .append('g')
    .append('rect')
    .addClass('rect1')
    .append('rect')
    .addClass('rect2')

但是它是这样做的:

<g>
    <rect class="rect1">
        <rect class="rect2"></rect>
    </rect>
</g>

我如何在同一水平插入多个矩形组?

您想要这样的东西。您需要保持对g元素的引用，以便您可以在其上创建多个子元素。

g = rectangles
    .selectAll('g')
    .data(data)
    .enter()
    .append('g')
g.append('rect')
    .addClass('rect1')
g.append('rect')
    .addClass('rect2')

您可以先添加<g>，然后为每个数据添加一个矩形，动态设置每个矩形的类。例如:

var svg = d3.select("svg");
var rectangles = svg
    .append('g')
    .selectAll('rect')
    .data([0, 1])
    .enter()
    .append('rect')
    .attr('class', function(d){ return 'rect' + (d+1); });
相关文章：