d3.js 标记自动定向不起作用答案

【问题标题】：d3.js marker auto orient not workingd3.js 标记自动定向不起作用
【发布时间】：2015-06-03 20:58:46
【问题描述】：

我开始使用 d3 来绘制树形图，但我遇到了路径标记上的自动定向问题。路径标记似乎根本没有被旋转。

我的标记定义为：

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);

这些标记不应该被旋转以与引用它们的路径对齐吗？

编辑：

<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>

上面是一个超级简化的例子。浏览器中的结果是：

这是一个 JSFiddle http://jsfiddle.net/mcottingham/LLud4kja/

【问题讨论】：

标签： javascript svg d3.js markers

【解决方案1】：

移除标记，您会看到曲线的末端是垂直的，因此标记的方向与预期一致。

<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>

【讨论】：