ズーム可能な日差し図（％）

Question

私はD3を初めて使っています。私は内層と外層に分けられたサンバーストチャートに取り組んでいます。内層はグループを表し、外層はサブグループを表します。参考のための実例があります：jsfiddle.net/9gpL308y/1/（これは私が出発点として使ったオリジナルのフィドルです：jsfiddle.net/j9WnB/64/）

現在、それぞれの内層は外層のカテゴリの値に基づいて番号が割り当てられ、カテゴリはサブカテゴリと同じように動作します。私が必要とするのは、各レイヤーがパーセンテージ（100のうち、同じレイヤー上のすべてのグループが加算されるべき）として表示され、適切なサイズにスケールされることです。例えば、このイメージを取る：

image of the wanted chart

実施例は非常に参考になります。私はこの問題に関するいくつかの話題を見つけましたが、私はそれを提供されたアドバイスで動作させることができませんでした。正直言って、私はまだここで何が起こっているのか完全には理解していません（私はジオメトリには決して満足できませんでした）。

tl; dr：上記のフィドルから太陽バーチャートをパーセンテージで表示し、アークスケールを適切に表示するにはどうすればよいですか？

ありがとうございました。

Answer 1

この場合ジオメトリとは少し違いがあります（ただし、ラベルの配置は例外ですが、これはarc.centroidが提供するものです）。パーセンテージを得るには、子ノードのエクステントを親のエクステントで除算するだけです。

ここでの例作業

   var center = arc.centroid(d); 
       g.append("text") 
       .attr("text-anchor", "middle") 
       .attr("transform", "translate(" + center + ")") 
       .text(function(_) { 
        if (d.parent == null) 
        { 
         return; 
        } 
        var percentage = 100 * d.dx/d.parent.dx; // that's it! 
        return d3.format(",.2f")(percentage) + "%"; 
       }) 

：パーティションレイアウトのすべてのノードをダンプし、その後、彼らは視覚的な絵と一致しない方法を見つけることができる教育目的のためにhttp://jsfiddle.net/9gpL308y/2/

。また、parent、dxなどについては、パーティションレイアウトに関するドキュメントを参照してください。https://github.com/d3/d3-3.x-api-reference/blob/master/Partition-Layout.md