Question

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

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

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

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

Answer 1

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

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

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

1 个答案: