Open blumonkey opened 8 years ago
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;
});
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!