javascript - 在D3中计算弧的长度

Question

我正在使用 D3 中的旭日形图，需要计算任何给定段的宽度。在下图中，如何获得 Arc1 线 AB 的实际宽度（以像素为单位）？

标签： javascriptd3.jstrigonometry

Answer 1

大概如果我知道innerRadius弧的 （A 和 B 的长度相同），我可以绘制一个假想三角形并使用余弦定律

c2 = a2 + b2 - 2ab cos C

但我需要角度C。这可以通过获取开始和结束角度的差异在 D3 中检索。

var x = d3.scaleLinear()
    .range([0, 2 * Math.PI])
    .clamp(true);

var y = d3.scaleLinear()
    .range([0, this.radius])
    .clamp(true);

var.arc = d3.arc()
    .startAngle(function(d) {
        return x(d.x0);
    })
    .endAngle(function(d) {
        return x(d.x1);
    });

function getRingRadius() {
    // for example
    return 50;
}

function measureSegment(d) {
    var a = getRingRadius() * (d.depth || 0), b = a;
    var C = arc.startAngle()(d) - arc.endAngle()(d);

    return Math.sqrt((a*a + b*b) - 2*a*b*Math.cos(C));
}