D3 svg内的Bootstrap工具提示中的断线答案

【问题标题】：Breaking line in Bootstrap tooltip inside D3 svgD3 svg内的Bootstrap工具提示中的断线
【发布时间】：2017-08-11 18:40:20
【问题描述】：

相关的代码块。

        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，但无法在工具提示中使用。

有什么想法吗？谢谢。

【问题讨论】：

标签： twitter-bootstrap d3.js tooltip

【解决方案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 问题的答案。

【讨论】：