Question

对D3和SVG来说是新手并且我为什么使用旋转角度+弧距离来计算x，y坐标（围绕圆/时钟面的SVG元素位置）的数学运算非常困惑...基本上：< / p>

我创建了circle / clock-face（包括翻译）：

var face = d3.select(".chart").append("g")
    .attr("class", "clock-face")
    .attr('transform','translate(' + width/2 + ',' + (circleRadius + margin) + ')');

我将一个“g”元素（包含数据+一些视觉资料）添加到clock-face＆amp;将旋转应用于单个数据点容器（基于线性比例以围绕圆圈定位元素）：

var circleScale = d3.scale.linear()
    .range([0, data.length])
    .domain([0, 60]);

// data container
var bar = face.selectAll('g')
    .data(data)
    .enter().append('g')
    .attr('transform', function(d, i) {
        return 'rotate('  + circleScale(i) + ')';
    })
    .each(function(d, i) {
        // set theta
        d.theta = circleScale(i);
});

我希望能够根据它的theta（旋转角度）值计算我个别数据点容器的x / y坐标：

function calcPosition(centerX, centerY, radius, theta) {
    var coords = {};
    var x = centerX + radius * Math.cos(theta);
    var y = centerX + radius * Math.sin(theta);
    coords.x = x;
    coords.y = y;

    return coords;
};

var origin = calcPosition(0, 0, circleRadius, d.theta);

face.append('circle')
    .attr('cx', origin.x)
    .attr('cy', origin.y)
    .attr('r', 5)
    .attr('fill', 'yellow')

会产生完全错误的x / y坐标。我相信我的三角函数在根据旋转角度计算x / y坐标时是正确的，但是关于SVG变换的一些东西正在惹恼它...任何建议？

Answer 1

在您的圈子比例中，看起来您在范围和域之间错误地交换。范围应为[0,360]或[0,2*Math.PI]。请注意您目前如何使用[0,60]而不是360，这可能是一个错误。也许域名应该成为[0,data.length] - 正如您目前所拥有的范围一样 - 但我不确定数据的性质以及这是否有意义。我希望在一天中的几个小时内，域名为[0,12]。

至于你的calcPosition触发器，theta 必须以弧度为单位才能工作，这表明你的circleScale应该在[0,2*Math.PI]范围。但是，对于SVG变换，您需要使用度数。因此，您需要在其中一个实例中进行一些转换。此外，您在calcPosition中有一个错误，其中y应基于centerY而不是centerX。

最后，我建议在简单的for循环中预先计算所有d.theta，而不是在渲染时在each函数中这样做。这主要是为了分离关注点和避免错误（比如，如果在渲染条形图之前尝试访问d.theta会发生什么？）。

基于D3 + svg变换的旋转角计算x / y坐标的混淆

1 个答案: