どのように、私は単純なインタラクティブな円形のチャートを作りました- 1

アークラインを描画する

まず第一に、円弧を描画する円形チャートを形成する必要があります.
極地を描く数学的理論がある.

function polarToCartesian(centerX, centerY, radius, angleInDegrees) { // Point of Polar
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)) + setViewportX,
    y: centerY + (radius * Math.sin(angleInRadians)) + setViewportY
  };
}

次に、円弧の開始点と終了点をradius、call description ()メソッドで描画アークを終了します.

function describeArc(x, y, radius, startAngle, endAngle) {
  var start = polarToCartesian(x, y, radius, endAngle);                                                                              
  var end = polarToCartesian(x, y, radius, startAngle);

  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

  var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
  ].join(" ");

  return d;
}

サークルの各セクションのタイトルは、順序-時計回りと逆があります.
その結果、方向のフラグを定義する必要があります.