将链接文本添加到动画 D3 树答案

【问题标题】：Adding Link Text to Animated D3 Tree将链接文本添加到动画 D3 树
【发布时间】：2014-06-23 11:03:13
【问题描述】：

问题：链接文本未呈现。

目标：以以下方式将链接文本添加到每个路径：1) 允许文本换行和 2) 确保在选择/取消选择节点时文本将进出过渡。

原始来源：位于：http://bl.ocks.org/Guerino1/raw/ed80661daf8e5fa89b85/

每个关系/链接都有一个可以在数据中看到的描述性谓词...

  var linkSet = [
    {source: "N0", predicate: "Predicate 1", target: "N1"},
    {source: "N1", predicate: "Predicate 2", target: "N2"},
    {source: "N2", predicate: "Predicate 3", target: "N3"},
    {source: "N0", predicate: "Predicate 4", target: "N4"},
    {source: "N4", predicate: "Predicate 5", target: "N5"},
    {source: "N0", predicate: "Predicate 6", target: "N6"},
    {source: "N6", predicate: "Predicate 7", target: "N7"},
    {source: "N6", predicate: "Predicate 8", target: "N8"},
    {source: "N7", predicate: "Predicate 9", target: "N9"},
    {source: "N7", predicate: "Predicate 10", target: "N10"}
  ];

我尝试通过 foreignObject 将该谓词应用于每个路径，目的是我能够包装谓词文本，就像包装节点文本一样。 foreignObject 附加到“路径”元素。我使用的代码如下...

// Add Predicate text to each link path
link.append("svg:foreignObject")
    .data(linkSet)
    .attr("width", "200")
    .attr("height", "40")
  .append("xhtml:body")
    .attr("xmlns", "http://www.w3.org/1999/xhtml")
    .html(function(d){ return "<p>" + d.predicate + "</p>"; });

但是，虽然 DOM 树显示 foreignObject 和 html “p” 元素已添加并存在，但文本不会呈现。

【问题讨论】：

你有什么元素作为<foreignObject>元素的父元素。
我将 foreignObject 附加到路径元素。
这就是你的问题，foreignObject> 元素不能是路径元素的子元素。您可能希望他们成为兄弟姐妹。
为什么foreignObject可以附加到节点而不是链接路径？另外，您的回答是否暗示链接/关系文本必须单独绘制在 SVG 画布上，并像节点和链接一样分别进出转换？
我认为节点是<g> 元素，它们可以有<foreignObject> 子元素。我不知道你的第二句话是什么意思，所以我猜答案是否定的，因为我当然没有暗示我不明白的东西;-)

标签： javascript svg d3.js tree data-visualization

【解决方案1】：

答案是在每个路径的质心处将<g> 元素添加到SVG，然后将<foreignObject> 元素附加到每个<g> 元素...

var linkTextItems = vis.selectAll("g.linkText")
    .data(tree.links(nodes), function(d) { return d.target.id; })

var linkTextEnter = linkTextItems.enter().append("svg:g")
    .attr("class", "linkText")
    .attr("transform", function(d) { return "translate(" + (d.target.y + 20) + "," + (getCenterX(d)) + ")"; });

// Add Predicate text to each link path
linkTextEnter.append("svg:foreignObject")
    .attr("width", "120")
    .attr("height", "40")
  .append("xhtml:body")
    .attr("xmlns", "http://www.w3.org/1999/xhtml")
    .html(function(d){ return "<p>" + (linksByIdHash[d.source.id + ":" + d.target.id].predicate) + "</p>"; });

【讨论】：