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;});

使用D3在.html（）中插入新行

1 个答案: