//marker-end of path
svg.append('marker')
.attr('id', "end-arrow")
.attr('markerHeight', 2.5)
.attr('markerWidth', 2, 5)
.attr('orient', 'auto')
.attr('refX', -5)
.attr('refY', 0)
.attr('viewBox', '-5 -5 20 10')
.append('path')
.attr('d', 'M 0,0 m -5,-5 L 0,0 L -5,5 Z')
.style("fill", "#969696");
And then here:
// Enter + Update
links.attr('d', path)
.style("marker-end", "url(#end-arrow)")
.style("stroke-width", function (d) {
return Math.max(1, d.dy);
});
And a slight mod to sankey.js for some room to draw the arrow at the end of the path:
function link(d) {
var xs = d.source.x + d.source.dx,
//added the following to shrink the path so there is room for the arrow;
//however path bunches up in cycle demo, is there a way to smooth out the path a bit
xt = d.target.x - (d.dy / 2),
//xt = d.target.x,
Is there a way to smooth out the path a bit so that it doesn't bunch up as shown in the png.
I added a marker:
//marker-end of path svg.append('marker') .attr('id', "end-arrow") .attr('markerHeight', 2.5) .attr('markerWidth', 2, 5) .attr('orient', 'auto') .attr('refX', -5) .attr('refY', 0) .attr('viewBox', '-5 -5 20 10') .append('path') .attr('d', 'M 0,0 m -5,-5 L 0,0 L -5,5 Z') .style("fill", "#969696");
And then here: // Enter + Update links.attr('d', path) .style("marker-end", "url(#end-arrow)") .style("stroke-width", function (d) { return Math.max(1, d.dy); });
And a slight mod to sankey.js for some room to draw the arrow at the end of the path:
function link(d) { var xs = d.source.x + d.source.dx, //added the following to shrink the path so there is room for the arrow; //however path bunches up in cycle demo, is there a way to smooth out the path a bit xt = d.target.x - (d.dy / 2), //xt = d.target.x,
Is there a way to smooth out the path a bit so that it doesn't bunch up as shown in the png.