d3js换行符在使用html的文本中不起作用

d3 js line breaks not working in text using html

本文关键字：文本 不起作用 html 换行符 d3js      更新时间：2023-09-26

为什么break标记不呈现？

我在SO上读了几个答案，并尝试了各种不同的方法，但都没有成功。

这个fiddle显示了当前功能齐全的d3.js示例，其中存在break标签无法呈现的问题：

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专家对我构建的代码有其他评论/意见，请告诉我。当我完成后，我希望这个代码是一流的。

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

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

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>");
    });
相关文章：