折りたためるD3ツリーにテキストを追加する

Question

を結ぶ私はここで、この例を次のようだ：この部分にはhttps://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd

を、私が持っている：

// Enter any new links at the parent's previous position. 
    var linkEnter = link.enter().insert('path', "g") 
     .attr("class", "link") 
     .text(function(d) { 
      console.log(d.data.expression); 
      return d.data.expression; 
     }) 
     .attr('d', function(d){ 
     var o = {x: source.x0, y: source.y0} 
     return diagonal(o, o) 
     }); 

私は、コンソールに出力を参照してください、私はしないでくださいリンク上で目に見えるテキストを参照してください。

以下はupdate（）メソッド全体です。

function update(source) { 

    // Assigns the x and y position for the nodes 
    var treeData = treemap(root); 

    // Compute the new tree layout. 
    var nodes = treeData.descendants(), 
     links = treeData.descendants().slice(1); 

    // Normalize for fixed-depth. 
    nodes.forEach(function(d){ d.y = d.depth * 180}); 

    // ****************** Nodes section *************************** 

    // Update the nodes... 
    var node = svg.selectAll('g.node') 
     .data(nodes, function(d) {return d.id || (d.id = ++i); }); 

    // Enter any new modes at the parent's previous position. 
    var nodeEnter = node.enter().append('g') 
     .attr('class', 'node') 
     .attr("transform", function(d) { 
     return "translate(" + source.y0 + "," + source.x0 + ")"; 
    }) 
    .on('click', click); 

    // Add Circle for the nodes 
    nodeEnter.append('circle') 
     .attr('class', 'node') 
     .attr('r', 1e-6) 
     .style("fill", function(d) { 
      return d._children ? "lightsteelblue" : "#fff"; 
     }); 

    // Add labels for the nodes 
    nodeEnter.append('text') 
     .attr("dy", ".35em") 
     .attr("x", function(d) { 
      return d.children || d._children ? -13 : 13; 
     }) 
     .attr("text-anchor", function(d) { 
      return d.children || d._children ? "end" : "start"; 
     }) 
     .text(function(d) { return "expression: " + d.data.expression; }); 

    // UPDATE 
    var nodeUpdate = nodeEnter.merge(node); 

    // Transition to the proper position for the node 
    nodeUpdate.transition() 
    .duration(duration) 
    .attr("transform", function(d) { 
     return "translate(" + d.y + "," + d.x + ")"; 
    }); 

    // Update the node attributes and style 
    nodeUpdate.select('circle.node') 
    .attr('r', 10) 
    .style("fill", function(d) { 
     return d._children ? "lightsteelblue" : "#fff"; 
    }) 
    .attr('cursor', 'pointer'); 


    // Remove any exiting nodes 
    var nodeExit = node.exit().transition() 
     .duration(duration) 
     .attr("transform", function(d) { 
      return "translate(" + source.y + "," + source.x + ")"; 
     }) 
     .remove(); 

    // On exit reduce the node circles size to 0 
    nodeExit.select('circle') 
    .attr('r', 1e-6); 

    // On exit reduce the opacity of text labels 
    nodeExit.select('text') 
    .style('fill-opacity', 1e-6); 

    // ****************** links section *************************** 

    // Update the links... 
    var link = svg.selectAll('path.link') 
     .data(links, function(d) { return d.id; }); 

    // Enter any new links at the parent's previous position. 
    var linkEnter = link.enter().insert('path', "g") 
     .attr("class", "link") 
     .text(function(d) { 
      console.log(d.data.expression); 
      return d.data.expression; 
     }) 
     .attr('d', function(d){ 
     var o = {x: source.x0, y: source.y0} 
     return diagonal(o, o) 
     }); 

    // UPDATE 
    var linkUpdate = linkEnter.merge(link); 

    // Transition back to the parent element position 
    linkUpdate.transition() 
     .duration(duration) 
     .attr('d', function(d){ return diagonal(d, d.parent) }); 

    // Remove any exiting links 
    var linkExit = link.exit().transition() 
     .duration(duration) 
     .attr('d', function(d) { 
     var o = {x: source.x, y: source.y} 
     return diagonal(o, o) 
     }) 
     .remove(); 

    // Store the old positions for transition. 
    nodes.forEach(function(d){ 
    d.x0 = d.x; 
    d.y0 = d.y; 
    }); 

    // Creates a curved (diagonal) path from parent to the child nodes 
    function diagonal(s, d) { 

    path = `M ${s.y} ${s.x} 
      C ${(s.y + d.y)/2} ${s.x}, 
       ${(s.y + d.y)/2} ${d.x}, 
       ${d.y} ${d.x}` 

    return path 
    } 

    // Toggle children on click. 
    function click(d) { 
    if (d.children) { 
     d._children = d.children; 
     d.children = null; 
     } else { 
     d.children = d._children; 
     d._children = null; 
     } 
    update(d); 
    } 
} 

誰でも光を放つことができれば、私はそれを感謝します。ありがとうございました！

Answer 1

それはあなたがこの行を達成したいものを非常に明確ではないが、ここで問題です：挿入した後

...

var linkEnter = link.enter().insert('path', "g") 

...この選択は<path>選択です。もちろん、パスの属性（なし）はtextに設定する必要はありません。あなたが欲しいものは何でも

、2つの選択のブロックを破る：

var linkEnter = link.enter().insert('path', "g") 
    .attr("class", "link") 
    .attr('d', function(d) { 
     var o = { 
      x: source.x0, 
      y: source.y0 
     } 
     return diagonal(o, o) 
    }); 

var fooEnter = link.enter().insert('text', "g") 
    .attr("class", "link") 
    .text(function(d) { 
     console.log(d.data.expression); 
     return d.data.expression; 
    });