实现d3启动事件监听器

Question

似乎我不太明白d3中的事件监听器是如何工作的。

举个例子，让我们创建一个svg元素，然后在svg容器中创建一个圆圈：

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

svg.append("circle")
    .attr("cx", 100)
    .attr("cy",100)
    .attr("r", 40)
    .style("fill", "black");

圆圈的半径为40px。

我想在圆上实现一个过渡，在过渡开始时我将半径改为80px，然后将其减小到20个点。

为什么这不起作用？

d3.select("circle")
.transition()
.delay(750)
.duration(1000)
.each("start", function() {d3.select(this).attr("r", 80);  }  )
.attr("r", 20)