计算D3中的弧长

Question

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

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));
}

计算D3中的弧长

Calculating a the length of an arc in D3

javascript

trigonometry

d3.js