0

ここで別の q を見ていました (クリックすると d3 javascript の代替色)、変更への移行をどのように行うことができるか疑問に思っていました。

トグル関数が色ではなく円の位置を変更するように、コードを少し書き直しました。

var SVG = d3.select("body")
    .append("svg")
    .attr("width", 300)
    .attr("height", 300);    

var togglex = (function(){
var currentx = 50;

return function(){
    currentx = currentx == 50 ? 200 : 50;
    d3.select(this).attr("cx", currentx);
}
})();



SVG.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 20)
    .attr("cx", 50)
    .attr("cy", 50)
    .on("click", togglex);

したがって、togglex 関数は、クリックすると円を移動します。.on("click", toggle) の前後にトランジションを入れようとしましたが、うまくいきません。（なぜそうならないのか、ちょっと理解できます。それは関数であり、画面上の位置ではありません）。また、トランジションを関数自体に構築しようとしましたが、少なくとも私が行った方法ではうまくいきませんでした。（繰り返しますが、それがうまくいかない理由もわかります）。

では、どうすればよいのでしょうか。

4

1 に答える 1

1

トランジションは、属性を変更している場所、つまりtogglex関数内で行う必要があります

d3.select(this).transition().duration(500).attr("cx", currentx);
于 2013-09-08T11:01:22.883 に答える