在D3 svg

Question

相关代码块。

        nodeEnter.append("text")
        .attr("x", function (d) { return d.children || d._children ? -10 : 10; })
        .attr("dy", ".35em")
        .attr("text-anchor", function (d) { return d.children || d._children ? "end" : "start"; })
        .text(function (d) { return d.ured; })
        .style("fill-opacity", 1e-6)
        .attr("title", function (d) { return "user: " + d.ured +'BREAK LINE HERE'+ "name: " + d.name; });

BS工具提示在那里，但我需要在变量之间划一条线。

我已尝试过

行

.append("title")
            .text(function (d) { return "user: " + d.ured + "\nname: asd"; });

并且它们确实显示在不同的行中，但它不是引导工具提示。我还根据this使用了tspans，但无法在工具提示中使用它。

有什么想法吗？感谢。

Answer 1

如果您将来遇到任何困难，我选择了每个节点，然后在所需的位置硬编码<br />。最后将data-html属性设置为true。

在下面的示例代码中，我粗暴地返回了字符串，但您当然可以将它包装在一个设计良好的函数中。

svg.selectAll("g.node").each(function () {
var node = d3.select(this);    
var tooltipText = function (d) {
    return "User: " + d.user + "<br />Nombre: " + d.name;
};                            
if (tooltipText) {
    node.select("text")
      .attr("data-html", "true")
      .attr("title", tooltipText);
}
});

道具回答this问题。