How to put labels on the edges in the Dendrogram example?

后端 未结 1 2047
北荒
北荒 2021-02-14 08:47

Given a tree diagram like the Dendrogram example (source), how would one put labels on the edges? The JavaScript code to draw the edges looks like the next lines:



        
1条回答
  •  北荒
    北荒 (楼主)
    2021-02-14 09:39

    Mike Bostock, the author of D3, very graciously helped with the following solution. Define a style for g.link; I just copied the style for g.node. Then I replaced the "var link =...." code with the following. The x and y functions place the label in the center of the path.

    var linkg = vis.selectAll("g.link")
        .data(cluster.links(nodes))
        .enter().append("g")
        .attr("class", "link");
    
    linkg.append("path")
        .attr("class", "link")
        .attr("d", diagonal);
    
    linkg.append("text")
        .attr("x", function(d) { return (d.source.y + d.target.y) / 2; })
        .attr("y", function(d) { return (d.source.x + d.target.x) / 2; })
        .attr("text-anchor", "middle")
        .text(function(d) {
            return "edgeLabel";
        });
    

    The text function should ideally provide a label specifically for each edge. I populated an object with the names of my edges while preparing my data, so my text function looks like this:

        .text(function(d) {
            var key = d.source.name + ":" + d.target.name;
            return edgeNames[key];
        });
    

    0 讨论(0)
提交回复
热议问题