точки линий 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");