javascript - 使用外部对象包装 D3 树中节点的文本

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

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

Answer 1

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

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