Question

问题：链接文字无法呈现。

目标：以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被附加到＆＃34;路径＆＃34;元件。我使用的代码如下......

// 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＆＃34; p＆＃34;添加元素并存在文本不呈现。

Answer 1

答案是在每条路径的质心处向SVG添加<g>元素，然后将<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>"; });

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

1 个答案: