次のように複数行のキャプションを追加して、この例から独自のサンバースト ダイアグラムを作成しています。.
for(i = 0; i < MAX_LINES; i++){
var text = g.append("text")
.attr("transform", function(d) { return "translate(" + getCentroid(d) + ")rotate(" + textRotation(d) + ")"; })
.attr('text-anchor', function (d) { return textRotation(d) > 180 ? "end" : "start"; })
.attr("dx", "0")
.attr("dy", "0em")
.attr("class", function(d) { return setStyle(d); })
.style("fill", function(d) { return setColor(d); })
.style("text-anchor", "middle")
.append("tspan")
.attr("dy", function(d) { return getDY(d, i); } )
.text(function(d) { return getLine(d, i); });
//.text(function(d) { return d.name; });
}
これは初期状態ではまったく問題なく動作しますが、特定のパーティションをクリックしてズームすると、すべてが乱雑になります。スクリプトは最初の行要素のみを移動し、他の要素を非表示にせず、画面上にあるべきではありません。
.duration(500)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
if (e.x >= d.x && e.x < (d.x + d.dx)) {
var arcText = d3.select(this.parentNode).select("text");
arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function(d) { return "translate(" + getCentroid(d) + ")rotate(" + textRotation(d) + ")"; })
.attr('text-anchor', "middle")
}
});
}
});
パーティションごとに変換するにはどうすればよいですか? 「tspan」またはそのスタイルクラスによる選択を試みました。
名前を付け直して再作成することでブロックを完全に更新することは可能ですか?の