Javascript d3.js标记自动定向不工作
我开始使用d3绘制树形图,我遇到了路径标记自动定向的问题。路径标记似乎根本没有旋转 我的标记定义为:Javascript d3.js标记自动定向不工作,javascript,svg,d3.js,markers,Javascript,Svg,D3.js,Markers,我开始使用d3绘制树形图,我遇到了路径标记自动定向的问题。路径标记似乎根本没有旋转 我的标记定义为: defs.selectAll('marker') .data(nodes, function (d) { return d.id || (d.id = ++i); }) .enter() .append('svg:marker') .attr('id', functi
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);
这些标记不应该旋转以与引用它们的路径对齐吗
编辑:
上面是一个超级简化的例子。浏览器中的结果是:
这是一个JSFIDLE删除标记,您将看到曲线在其末端是垂直的,因此标记的方向与预期一致
<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>