Question

为什么不会渲染break标记？

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

这个小提示显示当前功能完备的d3.js样本，并且没有渲染中断标记的问题：

相关的代码位在这里：

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。以下是另一个解决此问题的问题：Auto line-wrapping in SVG text。

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

使用html，d3 js换行符不能在文本中使用

2 个答案: