Question

var spans = {};
    var counter = 0;
    var f = 0;
    labelT.each(function(d,i){
            var splitted = d.name.split(" ");
            console.log(splitted);
            for(var k = 0,f = 0; k < splitted.length; k++,f += 1.2){
                spans[k] = labelT.select(this).append("tspan")
                .attr("class", "tspan"+counter)
                .attr("dy",f+"em")
                .attr("x",0)
                .text(function(d){return splitted[k]});
                counter ++ ;
            }
            counter ++;
    });

我想在labelT var中添加尽可能多的tspans，这是一个文本元素，取决于拆分的var数组中有多少个单词。这应该会为每个单词生成一个新行。问题是，我不知道如何选择当前的labelT元素。我在for循环和发布的选择版本中尝试了alread labelT.select。有人可以帮忙吗？谢谢！

Answer 1

虽然上述解决方案确实有效，但您应该能够使用“更多D3风格”的解决方案将数据重新绑定到元素。请注意，我没有测试过这段代码，所以你可能需要摆弄它才能让它100％正常工作：

labelT.each(function each(d,i) {
    var split = d.name.split(' ');

    d3.select(this)
        .data(split)
        .enter()
        .append('tspan')
        .attr('class', function setAttr(d, i) { return 'tspan' + i; })
        .attr('dy', function setAttr(d, i) { return (i * 1.2) + 'em'; })
        .attr('x', 0)
        .text(function setText(d) { return d; });
});

根据d3.js中的d属性向文本添加可变数量的tspan元素

1 个答案: