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 回答