Question

我想在d3中创建一个带有基数样条线的路径，将三角形作为标记端创建。但是，如果样条曲线是基数，则标记似乎不遵循路径的方向。

以下是一个例子：

＆＃13;

var svg = d3.selectAll('svg.one');
var svg2 = d3.selectAll('svg.two');
var svg3 = d3.selectAll('svg.three')

var coords = [[20, 30], [140, 60], [180, 120]]

svg.append('svg:defs')
  .append('svg:marker')
  .attr('id', 'triangle_marker')
  .attr('markerHeight', 5)
  .attr('markerWidth', 5)
  .attr('markerUnits', 'strokeWidth')
  .attr('orient', 'auto')
  .attr('refX', 0)
  .attr('refY', 0)
  .attr('viewBox', '-5 -5 10 10')
  .append('svg:path')
  .attr('d', 'M 0,0 m -5,-5 L 5,0 L -5,5 Z')
  .attr('fill', '#00c0ff');

svg.append('path')
.attr('d', d3.line()(coords))
.style('fill', 'none')
.style('stroke-width', '3.5px')
.style('stroke', '#000')
.attr('marker-end', 'url(#triangle_marker)');

svg2.append('path')
.attr('d', d3.line().curve(d3.curveBasis)(coords))
.style('fill', 'none')
.style('stroke-width', '3.5px')
.style('stroke', '#000')
.attr('marker-end', 'url(#triangle_marker)')

svg3.append('path')
.attr('d', d3.line().curve(d3.curveCardinal)(coords))
.style('fill', 'none')
.style('stroke-width', '3.5px')
.style('stroke', '#000')
.attr('marker-end', 'url(#triangle_marker)')

＆＃13;

<html>
  <body>
    <h2>Normal Line</h2>
    <svg class="one" height="300" width="300"></svg>
    <h2>Basis Line</h2>
    <svg class="two" height="300" width="300"></svg>
    <h2>Cardinal Line</h2>
    <svg class="three" height="300" width="300"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </body>
</html>

＆＃13;

如您所见，基数路径中的标记不会跟随其方向。 v4之前的D3版本没有这个问题。

有人可以指导我解决这个问题吗？或者这是不可能的？

标记在d3中不会跟随主要曲线路径的方向

0 个答案: