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.

enter image description here

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:

enter image description here

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

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - .htaccess mod_rewrite for dynamic url which has domain names -

Website Login Issue developed in magento -