使用d3.js将鼠标svg转换为极坐标图坐标

Question

我created使用d3类似to this example的极坐标图。

如何将svg坐标转换为极坐标？

var svgPolar = d3.select("#polar")
    .append("svg")
    .on("mousemove", function(){$("#coords").text(d3.mouse(this));})
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

我已经在jsfiddle上有鼠标移动的x和y坐标。 感谢。

修改

我根据自己的需要调整了它。但是，区分方位角看起来有点难看。

.on("mousemove", function(){
    var coords = d3.mouse(this);
    var adjusted_x = coords[0] - ( width / 2 );
    var adjusted_y = coords[1] - ( height / 2 );
    var d = Math.sqrt( ( adjusted_x * adjusted_x ) + ( adjusted_y * adjusted_y ) );
    var degrees_elevation = (( 1 - d/radius ) * 90).toFixed(2)
    var angle_azimuth = Math.atan2( adjusted_y, adjusted_x );
    var degrees_azimuth = ( angle_azimuth + ( Math.PI/2 ) ) * ( 180 / ( Math.PI ) );
    var degrees_azimuth_fixed = (degrees_azimuth > 0 ? degrees_azimuth : (degrees_azimuth+360)).toFixed(2);
    if(degrees_elevation >= 0)
        $("#coords").text(degrees_azimuth_fixed + " " + degrees_elevation);
})

http://jsfiddle.net/crbmba60/2/

Answer 1

一旦您将笛卡尔坐标转换为参考绘图区域的中心而不是左上角，这实际上相当简单。

var coords = d3.mouse(this);    
var adjusted_x = coords[0] - ( width / 2 );
var adjusted_y = coords[1] - ( height / 2 );

一旦你有了这个，你可以使用毕达哥拉斯定理得到距离中心的距离

var d = Math.sqrt( ( adjusted_x * adjusted_x ) + ( adjusted_y * adjusted_y ) );

和你的角度使用atan2

var angle = Math.atan2( adjusted_y, adjusted_x );

复杂性的另一个要点是atan2会给你一个角度，其中0度（或2 pi弧度）对应一个东方向。要将弧度角度转换为与基本方向对应的度数，您需要将Math.PI / 2添加到atan2给出的角度。例如，

var angle_in_degrees = ( Math.atan2( adjusted_y, adjusted_x ) + ( Math.PI / 2 ) ) * ( 360 / ( Math.PI * 2 ) );

这些应该是您根据鼠标坐标执行任何定位数学所需的基本要素。