Javascript D3中的单击、切换和转换

我正在看关于here（）的另一个问题，并且想知道如何将转换引入到变更中

我稍微重新编写了代码，以便切换函数可以更改圆的位置，而不是颜色

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（“单击”，切换）前后都进行转换，但没有成功。（我可以理解为什么没有，这是一个函数，而不是屏幕上的一个位置）。我也尝试过将转换构建到函数本身中，但这也不起作用，至少我是这样做的。（再一次，我明白为什么这也行不通）

---

那我怎么做呢

转换需要转到您更改属性的地方，即在您的

togglex

功能中

d3.select(this).transition().duration(500).attr("cx", currentx);

---

真漂亮，谢谢你。我将转换放在属性的错误一侧。一般规则是，转换后的状态应该在它之后。