节点末尾的箭头链接 d3.js答案

【问题标题】：arrow at the end of the node links d3.js节点末尾的箭头链接 d3.js
【发布时间】：2019-06-14 11:46:23
【问题描述】：

我正在构建一棵树并且已经做了一些结构：

我的链接代码如下：

   const links = d3
        .select('svg g.links')
        .selectAll('line.link')
        .data(root.links())
        .enter();

    links
        .append('path')
        .classed('link', true)
        .attr('d', this.buildCurvedNodesJointLine);

    buildCurvedNodesJointLine(d) {
     if (d.target.data.noParent) {
         return 'M0,0L0,0';
     }

     const ny = d.target.y + (d.source.y - d.target.y) * 0.5;

     const linedata: any = [
         {
            x: d.target.x,
            y: d.target.y
         },
         {
            x: d.target.x,
            y: ny
         },
         {
            x: d.source.x,
            y: d.source.y
         }
     ];

     const fun = d3
        .line()
        .x((data1: any) => data1.x)
        .y((data2: any) => data2.y)
        .curve(d3.curveStepAfter);

     return fun(linedata);

buildCurvedNodesJointLine 函数为我的节点构建曲线链接。但我不能在链接行的末尾添加方向箭头。所以它可能看起来像这样：

【问题讨论】：

您似乎想使用linedata 数组中的最后一个元素来定位您的箭头。对于箭头本身，您可以在该点附加 SVG polygon。

标签： javascript angular d3.js

【解决方案1】：

查看 marker-end 属性，该属性将自动附加定义的标记，并且如果标记的 orient 属性设置为 auto，也会将其定位正确。

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin: 0;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 300)
      .attr("height", 100);

    svg.append('defs').append('marker')
      .attr('id', 'arrow')
      .attr('viewBox', '0 0 10 6')
      .attr('refX', 10)
      .attr('refY', 3)
      .attr('markerWidth', 10)
      .attr('markerHeight', 6)
      .attr('markerUnits', 'userSpaceOnUse')
      .attr('orient', 'auto')
      .append('path')
      .attr('d', 'M 0 0 L 10 3 L 0 6 Z');

    svg.append('g')
      .attr('transform', 'translate(10,10)')
      .selectAll('path')
      .data(d3.range(4))
      .enter()
      .append('path')
      .style('stroke', 'black')
      .style('fill', 'none')
      .attr('marker-end', 'url(#arrow)')
      .attr('d', function(d, i) {
        return 'M 0 0 L 50 ' + i * 20;
      })
  </script>
</body>

【讨论】：