使用 D3 在 .html() 中插入新行

Question

我有这样的 JS 对象：

{
 name : "sldjfvbsdolbobgsd",
 myWeight : "[1,65,34,4,6,7,4,4,7,8,5]"
}

对于每个这样的对象，在强制导向布局中的 SVG 元素中都有一个圆圈。 'i' 是一个全局变量。我目前正在显示每个对象的“name”元素，如下所示：

node.append("text")
                    .attr("class", "nodetext")
                    .attr("dx", 12)
                    .attr("dy", ".35em")
                    .text(function (d) { return d.name; });

我想同时显示每个对象的名称和当前重量。我尝试了类似的方法，但没有成功：

*node.append("text")
                    .attr("class", "nodetext")
                    .attr("dx", 12)
                    .attr("dy", ".35em")
                    .html(function (d) { return d.name; } + "<br />" + function (d) { return d.myWeight[i]; });*

每个节点的输出是这样的：

function (d) { return d.name; }function (d) { return d.myWeight[i]; }

而我想要：

sldjfvbsdolbobgsd
34 // say, if `i` is 2

请帮助我正确显示它。

Answer 1

您的代码不起作用的原因是 d3 期望传递给 .html 的参数是函数或常量。在您的情况下，+ 导致函数转换为字符串。所以你传递给.html 的常量最终是：

function (d) { return d.name; } <br /> function (d) { return d.myWeight[i]; }

但是，SVG text 元素不会呈现 <br/> 标记，因此不会出现换行符。

在 SVG text 中添加换行符的正确方法是使用 tspan 和 dy offets：

var text = node.append("text")
    .attr("class", "nodetext")
    .attr("dx", 12)
    .attr("dy", ".35em");

text.append("tspan")
    .attr("dy", 0)
    .attr("x",0)
    .text(function(d) {return d.name;});

text.append("tspan")
    .attr("dy", "1.2em") // offest by 1.2 em
    .attr("x",0)
    .text(function(d) {return d.myWeight;});