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

线的点x1，x2，y1，y2与径向树中的节点不一致

1 个答案: