使用 foreignObjects 在 D3 树中包装节点的文本答案

【问题标题】：Using foreignObjects to wrap text of Nodes in a D3 Tree使用 foreignObjects 在 D3 树中包装节点的文本
【发布时间】：2014-06-22 15:22:22
【问题描述】：

问题：我正在尝试包装与 D3 树的节点关联的文本，但似乎无法正确地将文本分配给 HTML 链接。

我正在尝试使用附加“foreignObject”元素的方法，然后我可以在其中附加一个“div”元素，以控制宽度。获得“div”后，我会尝试在 HTML“a”元素中附加 HTML 链接和相关文本。

HTML DOM 对象显示“a”元素构造正确，但未在浏览器中呈现。它似乎不能被“body”元素包裹或不包裹。

代码：

      nodeEnter.append("svg:foreignObject")
          .attr("width", "50")
          //.append("xhtml:body")
          //.attr("xmlns", "http://www.w3.org/1999/xhtml")
        .append("svg:div").attr("class", "NODE_LABEL_DIV")
        .append("svg:a")
          .attr("xlink:href", function(d) { return d.hlink; })
          .text(function(d) { return d.name; })
          .attr("x", function(d) { return d.children || d._children ? horizontalNodeOffset : horizontalNodeOffsetLeaf; })
          .attr("dy", "-10")
          .attr("fill", "Blue")
          .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
          .style("fill-opacity", 1e-6);

我的问题：将 HTML“a”元素添加到 foreignObject 中的“div”的正确方法是什么，这样它才能正确呈现，所以我可以使用“div”元素包装文本？

【问题讨论】：

标签： javascript d3.js tree data-visualization word-wrap

【解决方案1】：

您为 div 和 a 元素使用了错误的命名空间。通过在它们前面加上 svg:，您要求浏览器将它们解释为 SVG 元素。使用 foreignObject 的全部意义在于能够使用非 SVG 元素——这些是 HTML 元素，应该这样声明（完全省略命名空间也可以）。

这是在 D3 中使用 foreignObject 的 complete example。您可以在 .html() 的参数中指定所有标记，或者在执行操作时附加单独的元素——重要的是您要正确使用命名空间。

【讨论】：

就是这样！谢谢！