D3 V4階層エッジv3のバンドルポート

Question

グラフをV4に移植するのに苦労しています。私はここに提供される指示に従ってみましたhttps://bl.ocks.org/mbostock/7607999

：d3 v4 Hierarchical Edge Bundlingが、無駄にここ

は、私が働いているものです。

ラベルを正しくレイアウトしましたが、エッジバンドルが正しくレンダリングされません。

ここで私が持っているものです。

var diameter = 960, 
    radius = diameter/2, 
    innerRadius = radius - 120; 

var cluster = d3.cluster() 
    .size([360, innerRadius]); 

const line = d3.line() 
    .x(d => d.x) 
    .y(d => d.y) 
    .curve(d3.curveBundle.beta(0.95)); 

var svg = d3.select("body").append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .append("g") 
    .attr("transform", "translate(" + radius + "," + radius + ")"); 

var link = svg.append("g").selectAll(".link"), 
    node = svg.append("g").selectAll(".node"); 

d3.json("readme-flare-imports.json", function(error, classes) { 
    if (error) throw error; 

    var wha = packageHierarchy(classes); 

    var root = d3.hierarchy(wha, (d) => d.children); 

    var links = packageImports(root.descendants()); 

    console.dir(links); 

    cluster(root); 

    var nodes = root.descendants(); 

    var edges = link.data(links); 

    node = node 
     .data(nodes.filter(function(n) { return !n.children; })) 
     .enter().append("text") 
     .attr("class", "node") 
     .attr("dy", ".31em") 
     .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); }) 
     .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) 
     .text(function(d) { return d.data.key; }) 

    edges.enter().append('path') 
     .attr('class', 'link') 
     .merge(edges) 
     .attr('d', d => { 
      //console.log(d.source.path(d.target)); 
      return line(d.source.path(d.target)); }); 

    edges.exit().remove(); 

他のすべてのコードは、本質的に実施例と同じである（私はpackageHierarchyとpackageImportsでいくつかの場所で.dataを追加する必要がありました）

ここではどのような私です結果は次のようになります。助けて！

Answer 1

私はそれを考え出しました！

const line = d3.line() 
    .x(d => d.x) 
    .y(d => d.y) 
    .curve(d3.curveBundle.beta(0.95)); 

これがあるべきである何かである：

別の答えから、この行は少し誤解を招くようだった

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

完全なソリューションをここで見つけることができます：

Hierarchical Edge Bundling v4 port