0
私は、基盤としてサンバーストの例を使用していて、新しいデータでクリックするとマルチラインの キャプションを変更しようとしています。D3.JS動的に置き換えます<tspan>
function click(d) {
text.transition().attr("opacity", 0);
console.log(d.depth);
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("start", function(e, i) {
if (e.x >= d.x && e.x < (d.x + d.dx))
{
var replaceText = d3.select(this.parentNode).select("text")
replaceText.remove("tspan")
var tspan = replaceText.append("tspan")
.attr("class", "sunburst2")
.attr("x", 0)
.attr("y", 0)
.attr("text-anchor", "middle")
.text("TEST");
}
})
//each
.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")
}
});
//end of each
}
PS：この例では、最初のキャプションが "TEST" に置き換える必要がありクリック機能は、次のようになります。
しかし、うまく動作せず、何も表示されません。私が間違っていることは何ですか？ ありがとうございます。どんな助言も役に立つでしょう。
、関数（E、I）{ 場合（例> = DX && EX <（DX + d.dx）） {VARのreplaceText = d3.select（this.parentNode）.select（ "テキスト"） replaceText.select（ "tspanの"） の.text（ "TEST"） }}） ' 最初のtspan要素の置き換え – VVK