將鏈接文本添加到動畫D3樹

目標：要添加鏈接文本到每個路徑的方式，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被附加到「path」元素。我用一下如下的代碼...

// 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」元素被添加和存在的文本不渲染。

來源

2014-06-23 Information Technology

你有作爲的父元素是什麼的'< foreignObject>'元素。 –

我將foreignObject附加到路徑元素。 –

這就是你的問題，'foreignObject>'元素不能成爲路徑元素的子元素。你可能希望他們是兄弟姐妹。 –

答案是<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>"; });

來源

2014-06-26 01:14:34

將鏈接文本添加到動畫D3樹

回答

相關問題