javascript - d3 js换行符在使用html的文本中不起作用

Question

为什么中断标签不呈现？

我已经阅读了关于 SO 的几个答案，并尝试了各种不同的方法，但都没有运气。

这个小提琴显示了当前功能齐全的 d3.js 示例，但没有呈现中断标记的问题：

http://jsfiddle.net/Xsnqx/1/

相关的代码在这里：

node.insert("text")
    .attr("class", "text")
    .style("text-anchor", "middle")
    .html(function(d) { 
        var html = d.name.split(" ");
        return html.join("<br>");
    });

注意：如果你们中的任何 d3 专家对我构建的代码有其他意见/观察，请告诉我。完成后，我希望这段代码是一流的。

Answer 1

您不能将 HTML 直接放入 SVG。您需要使用该foreignObject元素来嵌入 HTML。这是解决此问题的另一个问题：SVG 文本中的自动换行。

Answer 2

为了完整起见，我想发布最终用于生成 XML 的最终 d3 / js 代码（根据@ScottCameron 的回答）：

node.append("foreignObject")
    .attr("class", "label")
    .attr("width", "120")
    .attr("height", "120")
    .attr("transform", "translate(-60,-60)")
    .html(function(d) { 
        var html = d.name.split(" ");
        return html.join("<br>");
    });