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 三 Angular 函数以弧度为单位，而不是度数，所以如果你考虑到这一点，你的图表就会工作。

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