directed-graph-creator
directed-graph-creator copied to clipboard
Add labels to edges
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!
Did you ever figure out how to do this? Thanks!
Any update?
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;
});