1

放射状グラフでノードを svg 線で接続しようとしましたが、点 x1、x2、y1、y2 がノードと一致しません。極座標をデカルト座標に変更しましたが、何かが間違っていると思います。

これが私のjsfiddleです。これまで問題を解決しようとしました

助けてください！ありがとう

line.append("line")
      .attr("class", "line")
      .attr("x1", function(d) {return d.source.y * Math.cos(d.source.x-90);})
      .attr("y1", function(d) {return d.source.y * Math.sin(d.source.x-90);})
      .attr("x2", function(d) {return d.target.y * Math.cos(d.target.x-90);})
      .attr("y2", function(d) {return d.target.y * Math.sin(d.target.x-90);})  
      .attr("stroke-width", 3)
      .attr("stroke", "steelblue");
4

1 に答える 1

1

あなたはとても近いです！Javascript の三角関数は度ではなくラジアンで機能するため、それを考慮すると、グラフが機能します。

line.append("line")
  .attr("class", "line")
  .attr("x1", function(d) {return d.source.y * Math.cos(Math.PI/180 * (d.source.x-90));})
  .attr("y1", function(d) {return d.source.y * Math.sin(Math.PI/180 * (d.source.x-90));})
  .attr("x2", function(d) {return d.target.y * Math.cos(Math.PI/180 * (d.target.x-90));})
  .attr("y2", function(d) {return d.target.y * Math.sin(Math.PI/180 * (d.target.x-90));})  
  .attr("stroke-width", 3)
  .attr("stroke", "steelblue");
于 2013-05-09T22:03:45.647 に答える