Question

我有几个由rects和text组成的小组

var dataset = [
    {'rect':{ id:1 ,color:'green', posX:20, posY: 20},
    'text':{ id:1 ,title: 'Home', texto:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores minima unde magni enim vel atque! Ratione amet reiciendis incidunt, mollitia iste magnam natus, dolores unde nemo consequuntur cumque labore minus!'},
    },
    ...
];

我将rect和text添加到几个组但是我看不到文字。

var myGroups = svg.selectAll('g')
    .data(dataset)
    .enter()
    .append("g")
    .each(function(d) {
        d3.select(this).append("rect")
            .attr('class', 'rects')
            .attr("x", function(d) {
                return d.rect.posX;
            })
            .attr("y", function(d) {
                return d.rect.posY;
            })
            .attr("width", 160)
            .attr("height", 40)
            .attr("fill", function(d) {
                return d.rect.color;
            })
        d3.select(this).append("text")
            .attr('class', 'titles')
            .attr("x", 200)
            .attr("y", 300)
            .attr("width", 160)
            .attr("height", 40)
            .style('color', 'white')
            .style('font-family', 'Roboto')
            .attr('text', function(d) {
                return d.text.title
            })

    });

我做错了什么？

Answer 1

SVG <text>元素没有名为text的属性。

因此，而不是：

.attr('text', function(d) {
    return d.text.title
})

应该是：

.text(function(d) {
    return d.text.title
})

PS：与您的问题无关，但您不需要each来附加矩形和文本。这不是惯用的D3。只需创建一个＆＃34;输入＆＃34;选择矩形和文本：

myGroups.append("rect")
    .attr('class','rects')
    //etc...

myGroups.append("text")
    .attr('class','titles')
    //etc...

分组文本和矩形

1 个答案: