0

I am working with a sunburst graph in D3 and need to calculated the width of any given segment. In the below diagram how can I get the actual width in pixels of the line A-B for Arc1?

enter image description here

AndFisher
  • 633
  • 1
  • 5
  • 18
  • That's a math problem, not a programming one. I also have to wonder _why_ you'd need that particular chord length from such a diagram. – Alnitak Jul 05 '19 at 08:07
  • 2
    I'm voting to close this question as off-topic because it's a math question, not a programming one. – Alnitak Jul 05 '19 at 08:07
  • 2
    @Alnitak OP is asking if there is way in D3 without doing math. I think there is a way in D3 to get it. – kiranvj Jul 05 '19 at 08:10
  • 1
    Similar threads : https://stackoverflow.com/questions/13108478/d3-js-how-to-automatically-calculate-arc-lengths-in-radial-dendrogram and https://stackoverflow.com/questions/51908730/how-to-calculate-arc-length-dependently-of-start-angle – kiranvj Jul 05 '19 at 08:13

1 Answers1

2

Presumably if I know the innerRadius for an arc (which will be the same length for A and B) I can plot an imaginary triangle and use the Law of Cosines

c2 = a2 + b2 - 2ab cos C

But I'd need the angle C. This be retrieved in D3 by getting the difference in start and end angles.

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));
}
AndFisher
  • 633
  • 1
  • 5
  • 18