[D3] Adding Arrows to Links

        svg.append('defs').selectAll('marker')
            .data(['end']).enter()
            .append('marker')
            .attr('id', String)
            .attr('viewBox', '0 -5 10 10') // start at 0, -5, width 10, height 10
            .attr('refX', 10)    
            .attr('refY', -0.5)    
            .attr('markerWidth', 6)    
            .attr('markerHeight', 6)    
            .attr('orient', 'auto')    
            .attr('fill', '#404040')    
            .append('path')  
            .attr('d', "M0,5L10,0L0,-5");

        const path = svg
            .append('g')
            .selectAll('path')
            .data(linksData)
            .enter().append('path')
            .attr('fill', 'none')
            .attr('stroke', '#777')
            .attr('stroke-width', '2px')
            .attr('class', 'link')
            .attr('marker-end', 'url(#end)');

 

 

posted @ 2017-09-01 17:23  Zhentiw  阅读(169)  评论(0编辑  收藏  举报