d3ラジアルグラフの奇妙なパス/行の振る舞い

Question

私はd3ラジアルツリーグラフの例を変更しようとしています。オリジナルはノード間に斜めの曲がったパスを持ち、私はそれを直線にする必要がありました。

闘争の時間を過ごしてから、私は最終的にそれをすることができました。まあ、ちょっと。

this penに示されているように、ノードを結んでいる線は実際にはまっすぐですが、同じ中心点から始まっていません。中央ノードと第1レベルのリンクでは、行開始点が前記ノードの端に集中しており、より高いレベルのノードは、行ではなく1つの行でグループ化している。中心点はそれほど欲しくない。私はすでに限りx1, x2, y1, y2を描くように、私が思い付くことができるすべてを試してみた

  var link = svg.selectAll("link") 
      .data(links) 
      .enter().append("path") 
      .attr("class", "link"); 

      var lines = svg.selectAll('line') 
      .data(links) 
      .enter() 
      .append('line') 
      .attr('stroke',function(d) { 
       if(d.source.depth === 0) { 
        return 'red' 
       } else { 
        return '#ccc'; 
       } 
      }); 

      lines.attr('x1',function(d){return d.source.y}) 
      .attr('y1',function(d){return d.source.x/180*Math.PI}) 
      .attr('x2',function(d){return d.target.y }) 
      .attr('y2',function(d){return d.target.x/180*Math.PI}); 

      lines.attr("transform", function(d) { 
       return "rotate(" + (d.target.x - 90) + ")"; 
      }); 

： ペンにリンクを描画するための責任のコードの一部の行252で始まり、276で終わる、このように見えますそれらを切り換えて、そこにある数学とそれ以外のものを変えて行く。また、回転を変更して座標をリンクに強制的に適用しようとしました。毎回空に戻る。あなたは、いい人なので、覗いて正しい方向に向けることができますか？

Answer 1

コメントする評判が足りないため、回答として投稿してください。私はずっと前にこれをやったことがあるが、今は覚えていない。あなたのx1、y1、x2、y2の値は間違っているようです。

私は、x1 = d.source.x、x2 = d.target.x、y1 = d.source.y、y2 = d.target.yを与えました。そして、x1、y1の線を角度の中心として回転させます（これは忘れました）。

翻訳をローテーションする必要があります