问题:我试图包装与 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”元素包装文本?
最佳答案
您为 div
和 a
元素使用了错误的命名空间。通过在它们前面加上 svg:
前缀,您要求浏览器将它们解释为 SVG 元素。使用 foreignObject
的全部意义在于能够使用非 SVG 元素——这些是 HTML 元素,应该这样声明(完全省略命名空间也应该有效)。
这是一个complete example在 D3 中使用 foreignObject
。您可以在 .html()
的参数中指定所有标记,或者在您执行操作时附加单独的元素——重要的是您获得正确的命名空间。
关于javascript - 使用外部对象包装 D3 树中节点的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24352689/