javascript - 在d3js中生成箭头

我正在尝试使用.append("svg:marker")在每一行的末尾生成简单的箭头。我显然做错了-非常感谢您。

A link to bl.ocks example .

var svg = d3.select("body") // select the 'body' element
      .append("svg")           // append an SVG element to the body
      .attr("width", 600)
      .attr("height", 600);


d3.csv("data/myarrows.csv", dottype1, function(error, lines) {

svg.append("g")
      .selectAll("line")
      .data(lines)
      .enter()
      .append("line")
      .attr("x1", function(d) { return d.x1; })
      .attr("y1", function(d) { return d.y1; })
      .attr("x2", function(d) { return d.x2; })
      .attr("y2", function(d) { return d.y2; })
      .style("stroke", "brown")           // colour the line
      .style("stroke-width", 4)          // adjust line width
      .style("stroke-linecap", "square") // stroke-linecap type


svg.append("g")
      .selectAll("marker")
      .data(lines)
      .enter()
      .append("svg:marker")
      .attr('viewBox', '0 -5 10 10')
        .attr('refX', 6)
        .attr('markerWidth', 10)
        .attr('markerHeight', 10)
        .attr('orient', 'auto')
        .append('svg:line')
        .attr('d', 'M0,-5L10,0L0,5')
                 ;
});




function dottype1(d) {
  d.x1 = +d.x1x1;
  d.y1 = +d.y1y1;
  d.x2 = +d.x2x2;
  d.y2 = +d.y2y2;
   return d;
}

<!DOCTYPE html>
<html>
<head>
    <title>Arrows</title>
    <meta charset="utf-8" />

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

</head>


<body>

<script type="text/javascript">

  </script>

</body>
</html>

最佳答案

有很多错误：

您只需要一个标记，然后可以通过其ID对其进行引用。请参见docs。
标记应位于defs而不是g中，但这并不是很重要。
您使用line而不是path，但是只有path具有d属性。

在代码中，这意味着：

svg.append("g")
      .selectAll("line")
      .data(lines)
      .enter()
      .append("line")
      .attr("x1", function(d) { return d.x1; })
      .attr("y1", function(d) { return d.y1; })
      .attr("x2", function(d) { return d.x2; })
      .attr("y2", function(d) { return d.y2; })
      .attr("marker-end", "url(#triangle)") // add the marker
      .style("stroke", "brown")           // colour the line
      .style("stroke-width", 4)          // adjust line width
      .style("stroke-linecap", "square") // stroke-linecap type
               ;

svg.append("svg:defs")
      .append("svg:marker")
      .attr("id", "triangle")
      .attr('viewBox', '0 -5 10 10')
      .attr('refX', 6)
      .attr('markerWidth', 10)
      .attr('markerHeight', 10)
      .attr('orient', 'auto')
      .append('svg:path')
        .attr('d', 'M0,-5L10,0L0,5')
                 ;
});

我没有测试该代码，但是，我只是在devtools中手动尝试过。

关于javascript - 在d3js中生成箭头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32290073/