d3js v4分层边缘捆绑

Question

我尝试使用d3 v4进行类似this的分层边缘捆绑。我使用d3.curveBundle使线条弯曲。但在我的项目中，线条似乎没有弯曲。

我得到的是这样的直线：

这是我的代码：

var data = {
                  "name": "Eve",
                  "children": [
                    {
                      "name": "Cain"
                    },
                    {
                      "name": "Seth",
                      "children": [
                        {
                          "name": "Enos"
                        },
                        {
                          "name": "Noam"
                        }
                      ]
                    },
                    {
                      "name": "Abel"
                    },
                    {
                      "name": "Awan",
                      "children": [
                        {
                          "name": "Enoch"
                        }
                      ]
                    },
                    {
                      "name": "Azura"
                    }
                  ]
                };

    var cluster = d3.cluster()
                    .size([360, 120]);
    var nodes = cluster(d3.hierarchy(data));
    var links = nodes.links();

    var svg = d3.select("div.radial-network")
                .append("svg")
                .attr("width", "100%")
                .attr("height", "300")
                .attr("transform", "translate(120,120)");

    const line = d3.radialLine()
                    .curve(d3.curveBundle.beta(0.95))
                    .angle(function(d,i){ return d.x*Math.PI/180;})
                    .radius(function(d,i) {return d.y;});

    const edges = svg.selectAll('.link').data(links);
    edges.enter().append('path')
        .attr('class', 'link')
        .attr('stroke', 'red')
        .attr('d', function(d, i) {return line(d.source.path(d.target));});