javascript - 使用 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 坐标。 谢谢。

编辑

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

.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的 Angular

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

另一个复杂点是 atan2 将为您提供一个 Angular ，其中 0 度(或 2 pi 弧度)对应于东方向。要将以弧度为单位的 Angular 转换为与基本方向相对应的度数，您需要将 Math.PI/2 添加到 atan2 给出的 Angular 中。例如，

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

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