D3.js linkRadial() 方法

d3.linkRadial () 方法返回一个带有径向切线的新链接生成器。它通常在根部居中且子项从根部向外扩展时使用。

句法：

var link = d3.linkRadial()
    .angle(function(d) { return d.x; })
    .radius(function(d) { return d.y; });

参数：此函数不带任何参数。

返回值：此方法返回一个新的链接生成器。

例子：

HTML

    
 
    
    

 

 
    
        GeeksforGeeks
    
 
    
        D3.js | linkRadial() Method
    
 
    
    
    
 
    
 
        var data = [
            {source: [100,25], target: [175,175]},
            {source: [100,25], target: [25,175]},
            {source: [100,25], target: [125,175]},
            {source: [100,25], target: [75,175]},
            {source: [100,25], target: [225,175]},
            {source: [100,25], target: [275,175]},
            {source: [100,25], target: [125,175]}];
       
        // Radial link generator
        var link = d3.linkRadial()
                    .angle(d => xAngleScale(d[0]))
                    .radius(d => yRadiusScale(d[1]));
 
        var xAngleScale =
        d3.scaleLinear().domain([25,175]).range([Math.PI, Math.PI *2 ]);
        var yRadiusScale =
        d3.scaleLinear().domain([25,175]).range([0, 80]);
       
        //Adding the link paths
        d3.select("#gfg")
        .selectAll("path")
        .data(data)
        .join("path")
        .attr("d", link)
        .classed("link", true)
        .attr("transform", "translate(100,100)");
 
    

 

输出：