CODEWITHSUNDEEP
javascriptsvgd3.jsmarkers
mcottingham
mcottingham

Reputation: 2056

d3.js marker auto orient not working

I started playing around with d3 to draw tree graphs and I am having an issue with the auto orient on path markers. It seems that the path markers are not being rotated at all.

enter image description here

My markers are 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 be being rotated to be aligned with the path that 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 is a super simplified example. The result in the browser is:

enter image description here

Here is a JSFiddle http://jsfiddle.net/mcottingham/LLud4kja/

Upvotes: 1

Views: 954

Answers (1)

Robert Longson
Robert Longson

Reputation: 124179

Remove the marker and you'll see the curve is vertical at its end and the marker therefore is oriented as 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>

Upvotes: 2

Related Questions