javascript - ノード間のリンクを識別してリンクの太さを変更する D3.js

Question

SVG またはバウンディング ボックスの幅と高さを参照して動的にスケーリングするようにグラフを設定してきました。ノードとノードの境界線を使用すると、これは比較的簡単です。d.depth を使用し、目的の比率を割り当てて特定の深さのノードに相対的な半径を割り当てることで、問題は発生せず、深さの低いノードは重なりを避けるために小さくなります。次に、ノードの境界について、ノードの半径と境界の太さの比率を割り当てます。

これは、コンテナーをスケーリングしてズーム機能を追加するときに発生する問題に対する理想的なソリューションであることが証明されています。これが問題です：

テキスト、ノード、およびノー​​ドの境界線が束ねられることはなくなりますが、リンクの重みは変わりません。

また、ノード間のエッジの太さをスケーリングしたいのですが、親ノードまたは子ノードの半径に関連して太さを割り当てることができるように、エッジを識別する方法がわかりません

d3.json("aviation.json", function(root) {
  var nodes = balloon.nodes(root),
      links = balloon.links(nodes);


var link= svg.selectAll("path")
    .data(links)
  .enter().append("path")
    .attr("d",diagonal)
    .attr("stroke", "black")
    .attr("shape-rendering", "auto")
    .attr("fill", "none")
    .data(nodes)
    .attr("stroke-width", function(d) {return (1/5000*diameter);});


  var node = svg.selectAll("g.node")
    .data(nodes)
    .enter()
    .append("g")
    .attr("class", "node");


  node.append("circle")
      .attr("r", function(d) { return d.r;})
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("fill", "white")
      .attr("opacity", "0.05")
      .attr("stroke-width", function(d) {return d.r/600;}) //here I am referecing d.r 
                                                          //to find the stroke width.
      .attr("stroke-opacity", ".5")
      .on("Click", function(d) { return zoomClick});

var text = svg.selectAll("g.text")
      .data(nodes)
      .enter()
      .append("text")
      .attr("dx", function(d) { return d.x })
      .attr("dy", function(d) { return d.y })
      .attr("font-family", "Helvetica")
      .attr("font-size", function(d)  {return d.children ? d.r/7 : d.r/4;})                          
      .attr("stroke-width", function(d) {return d.r/400;})
      .attr("stroke-opacity", "1")
      .attr("fill", "white")
      .attr("pointer-events", "all")
      .style("text-anchor", "middle")
      .text(function(d) { return d.name; })