古い Rails/Protovis サイトを Django と D3.js に移行しています。Protovis サンバースト ( http://mbostock.github.com/protovis/ex/sunburst.html -- 私のコードについてはhttp://www.eafsd.org/assignments_sunburstsを参照)の修正版を使用し、再作成したいと考えています。これは D3.js でサンバーストの例 ( http://bl.locks.org/4063423 ) をベースラインとして使用していますが、アークにラベルを付けて壁にぶつかりました。
Aligning text inside circle arc d3jsやLooking for a way to display labels on sunburst chart (could not find a working example)など、他のいくつかのSOの質問を見てきましたが、テキストパスが機能していないようです。私が表示しているテキスト (18 世紀の外交上のタイトル) は非常に長くなる可能性があるため、可能であれば、ラベルを放射状に表示することをお勧めします。
例から次のコードを試しました。
d3.json("../assignment-by-type.json", function(error, root) {
var path = svg.datum(root)
.selectAll("path")
.data(partition.nodes)
.enter()
.append("path")
.attr("display", function(d) {
return d.depth ? null : "none";
}) // hide inner ring
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) {
return color((d.children ? d : d.parent).name);
})
.style("fill-rule", "evenodd")
.each(stash);
/* my additions begin here */
path.append("title")
.text(function(d) {return d.name + ": " + d.size});
path.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.append("textpath")
.attr("class", "textpath")
.attr("xlink:href", "#path")
.text(function(d) { return d.name });
/* end of what I've added, back to the example code*/
d3.selectAll("input").on("change", function change() {
var value = this.value === "count"
? function() { return 1; }
: function(d) { return d.size; };
path.data(partition.value(value).nodes)
.transition()
.duration(1500)
.attrTween("d", arcTween);
});
});
サンバーストが表示され、マウスオーバーでタイトルが表示されます (ただし、内側のリングにはサイズ関数がないため、未定義として返されます)。
私が行おうとしている他の 2 つの変更: 内部ノードが関連リーフの合計サイズを表示できるように、パッケージ サイズを再帰的に計算する方法を示す D3js スニペットが見つかりません。
最後に、独自の色範囲を追加する方法がわかりません。
お時間をいただき、誠にありがとうございます。どうもありがとう。