javascript - 如何设置箭头方向？

Question

这指的是我之前的问题:How to draw line automatically by reading coordinates from file?

我需要在一侧添加一个箭头，基于一列flag(R代表右侧，L代表左侧):

x1,y1,x2,y2,Flag
1,2,3,2,L
3,3,5,3,R 
5,3,6,3,L 
7,5,7,5,R
8,6,8,6,L 
9,7,2,7,L

这怎么可能？

Answer 1

这里最明显的解决方案是根据 flag 属性的值将标记设置为 marker-end 或 marker-start .

但是，再想一想，我们可以在这里做一些更有趣的事情:我们可以将所有标记设置为 marker-end，并且根据 flag，我们 <交换x1和x2属性，使得:

• x1 小于 x2(如果标志为 R)；
• x1 大于 x2(如果标志为 L)；

可以通过以下方式完成:

data.forEach(function(d) {
  if ((d.flag === "L" && d.x1 < d.x2) || (d.flag === "R" && d.x1 > d.x2)) {
    d.x1 = d.x2 + (d.x2 = d.x1, 0);
  }
});

这是演示:

const csv = `x1,y1,x2,y2,flag
1,2,3,2,L
3,3,5,4,R
5,3,6,3,L
7,5,8,5,R
8,6,9,6,L
9,7,2,8,L`;

const data = d3.csvParse(csv, function(d) {
  d.x1 = +d.x1 * 20;
  d.y1 = +d.y1 * 15;
  d.x2 = +d.x2 * 20;
  d.y2 = +d.y2 * 15;
  return d;
});

data.forEach(function(d) {
  if ((d.flag === "L" && d.x1 < d.x2) || (d.flag === "R" && d.x1 > d.x2)) d.x1 = d.x2 + (d.x2 = d.x1, 0);
});

const svg = d3.select("svg");

const marker = svg.append("defs")
  .append("marker")
  .attr("id", "marker")
  .attr("viewBox", "0 0 10 10")
  .attr("refX", "5")
  .attr("refY", "5")
  .attr("markerWidth", "6")
  .attr("markerHeight", "6")
  .attr("orient", "auto")
  .append("path")
  .attr("d", "M 0 0 L 10 5 L 0 10 z");

const enterSelection = svg.selectAll(null)
  .data(data)
  .enter()
  .append("line")
  .attr("x1", d => d.x1)
  .attr("y1", d => d.y1)
  .attr("x2", d => d.x2)
  .attr("y2", d => d.y2)
  .attr("marker-end", "url(#marker)")
  .style("stroke-width", "1px")
  .style("stroke", "black");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

由于您的值太小，我在这里将它们相乘，以便我们可以更好地看到这些线条。另外，因为您没有共享任何标记，所以我使用 MDN 处的标记。 .