javascript - 线的点 x1、x2、y1、y2 与径向树中的节点不重合

Question

我尝试在径向图中将节点与 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");

Answer 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");