javascript - d3.js marker auto orient not working -
i started playing around d3 draw tree graphs , having issue auto orient on path markers. seems path markers not being rotated @ all.
my markers defined as:
defs.selectall('marker') .data(nodes, function (d) { return d.id || (d.id = ++i); }) .enter() .append('svg:marker') .attr('id', function (d) { return 'marker_' + d.name; }) .attr('markerheight', 6) .attr('markerwidth', 6) .attr('orient', 'auto') .attr('markerunits', 'strokewidth') .attr('refx', 3) .attr('refy', 3) .append('svg:path') .attr('d', 'm0,0 v6 l6,3 z') .attr('fill', getnodecolor);
shouldn't these markers being rotated aligned path references them?
edit:
<svg style="width: 2000px; height: 600px;"> <defs> <marker refx="3" refy="3" markerheight="6" markerwidth="6" orient="auto" id="mymarker"> <path d="m0,0 v6 l6,3 z" style="fill: #ff0000;"></path> </marker> </defs> <path class="link" d="m1246.764705882353,15c1246.764705882353,63.142857142857146 277.05882352941165,63.142857142857146 277.05882352941165,111.28571428571429" style="marker-end:url(#mymarker); stroke: rgb(31, 177, 230); stroke-width: 1.5px;"> </path> </svg>
above super simplified example. result in browser is:
here jsfiddle http://jsfiddle.net/mcottingham/llud4kja/
remove marker , you'll see curve vertical @ end , marker therefore oriented expected.
<svg style="width: 2000px; height: 600px;"> <path d="m1246.764705882353,15c1246.764705882353,63.142857142857146 277.05882352941165,63.142857142857146 277.05882352941165,111.28571428571429" style="fill: none; stroke: rgb(31, 177, 230); stroke-width: 1.5px;"> </path> </svg>
Comments
Post a Comment