cjrd / directed-graph-creator

Interactive tool for creating directed graphs
283 stars 123 forks source link

Add labels to edges #7

Open blumonkey opened 8 years ago

blumonkey commented 8 years ago

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!

dbvrac commented 7 years ago

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

mayinghan commented 5 years ago

Any update?

mayinghan commented 5 years ago

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;
      });