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

Question

I'm in the process of building a tree and already did some structure: 我正在构建一棵树，并且已经做了一些结构：

My links code look as follow: 我的链接代码如下：

   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 function build curved links for my nodes. buildCurvedNodesJointLine函数为我的节点构建弯曲链接。 But I can't add direction arrow at the end of the links line. 但我不能在链接行的末尾添加方向箭头。 So it could look like this: 所以它看起来像这样：

Answer 1

Have a look at marker-end attribute, which will automatically append defined marker, and also orient it the right way if the marker has orient attribute set as auto. 看看marker-end属性，它会自动追加定义的标记，如果标记的orient属性设置为auto，也可以正确orient 。

 <!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>

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

问题描述

1 个解决方案

解决方案1
0 2019-06-15 07:39:47

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

问题描述

1 个解决方案

解决方案1 0 2019-06-15 07:39:47

解决方案1
0 2019-06-15 07:39:47