directed-graph-creator icon indicating copy to clipboard operation
directed-graph-creator copied to clipboard

Add labels to edges

Open blumonkey opened this issue 8 years ago • 3 comments

Not an issue, but an enhancement?

How can I add labels to the edges so that they are more descriptive in the relation between nodes? Can anyone please direct me in the right direction?

Thank You!

blumonkey avatar May 20 '16 09:05 blumonkey

Did you ever figure out how to do this? Thanks!

dbvrac avatar Nov 29 '16 01:11 dbvrac

Any update?

mayinghan avatar Jun 04 '19 09:06 mayinghan

I actually figured it out. Inside 'updateGraph' method, do:

const p = paths.enter().append("g");
//already given
    paths.enter()
      .append("path")
      .style('marker-end', 'url(#end-arrow)')
      .classed("link", true)
      .attr('id', d => {
        console.log(d.id);
        return "path" + d.id;
      })
      .attr("d", function (d) {
        return "M" + d.source.x + "," + d.source.y + "L" + d.target.x + "," + d.target.y;
      })
      .on("mousedown", function (d) {
        thisGraph.pathMouseDown.call(thisGraph, d3.select(this), d);
        }
      )
      .on("mouseup", function (d) {
        state.mouseDownLink = null;
      });
//start new code here
    p.append("text").attr("dy", -20)
      .append("textPath")
      .attr('id', d => {
        return ''+d.id;
      })
      
      .attr("text-anchor", "start")
      .style("font-size", 25)
      .style("fill", "#000")
      .style("text-anchor", "middle")
      .attr("startOffset", "50%")
      .attr("xlink:href", function(d) {
        console.log(d.id);
        return "#path" + d.id;
      })
      .text(function(d) {
        
        return d.func;
      });

mayinghan avatar Jun 04 '19 13:06 mayinghan