0

I had to use polyline to draw the edges because I needed straight line edges with arrow markers in the middle. (As suggested in Display an arrow head in the middle of D3 force layout link).

I also need to add labels to the edges(Something like this http://jsfiddle.net/bc4um7pc/). From what I understand, textPath is used to add text labels to a path. How to adapt this for polyline edges. textPath doesnt seem to work with polyline. How do I make this work?

var path = svg.append("svg:g").selectAll("path");
path = path.data(force.links(), function(d,i) {return d.source.id + "-" + d.target.id; });  
path.enter()
.append("polyline")
.attr("class", function(d) {  return "link " + d.type; })
.attr("id",function(d,i) { return "linkId_" + i; })
.attr("marker-mid", function(d) { return "url(#" + d.type + ")"; });

var linktext = svg.append("svg:g").selectAll(".linklabelholder");
linktext = linktext.data(force.links())
 .enter().append("g").attr("class", "linklabelholder")
 .append("text")
 .attr("class", "linklabel")
 .style("font-size", "13px")
 .attr("x", "50")
 .attr("y", "-20")
 .attr("text-anchor", "start")
 .style("fill","#000")
 .append("textPath")
 .attr("xlink:href",function(d,i) { return "#linkId_" + i;})
 .text( "test");
Community
  • 1
  • 1
swatinits
  • 43
  • 4
  • I would suggest converting your svg `polyline` element to an svg `path` element. See the `path` documentation here: http://www.w3.org/TR/SVG/paths.html – Josh Nov 25 '14 at 04:57
  • I can try that. But I also need the arrow heads somewhere in the middle else they get hidden by the nodes. And I wasn't able to make that work with path. And i guess as suggested in the other stack overflow post, polyline worked for getting arrowhead markers in the middle. I will try again to check if something works. Any suggestions? – swatinits Nov 25 '14 at 18:22

0 Answers0