我如何使用d3转换结束后调用一个函数在d3 v6完成转换?

Question

当我的条形图呈现时，我正在做一些过渡。

在这些过渡完成后，我想要渲染的值。

我试图使用d3过渡。结束，但看起来代码与以前的版本有所不同-我使用的是v6。

下面的代码运行时没有任何延迟——它在调用函数之前不会等待转换完成。

我也尝试过.end(renderValuesInBars(data, metric, countryID, measurements) )，但同样的事情发生了。

我哪里错了?

function renderVerticalBars(data, measurements, metric, countryID) {

let selectDataForBarCharts = d3.select("svg")
.selectAll("rect")
.data(data, d => d[countryID])

selectDataForBarCharts
.enter()
.append("rect")
.attr('width', measurements.xScale.bandwidth())
.attr("height", 0)
.attr('y', d => measurements.yScale(0))
.merge(selectDataForBarCharts)
.transition().delay(500)
.attr("transform", `translate(0, ${measurements.margin.top})`)
.attr('width', measurements.xScale.bandwidth())
.attr('x', (d) => measurements.xScale(d[countryID]))
.transition()
.ease(d3.easeLinear)
.duration(setSpeed())
.attr("height", d => measurements.innerHeight - measurements.yScale(d[metric]))
.attr("y", (d) => measurements.yScale(d[metric]))
.attr("fill", d => setBarColor(d))
.on("end", renderValuesInBars(data, metric, countryID, measurements) )

selectDataForBarCharts.exit()
.transition().duration(500).attr("height", 0).attr("y", d => measurements.yScale(0)).remove()

}

Answer 1

注意，.on("end", ...)方法接受第二个参数的回调，该回调在转换结束时执行。你发布的代码不是传递回调，但已经在声明的时刻评估renderValuesInBars函数。相反，你想传递一个回调，告诉d3计算应该在稍后的时间发生(在这种情况下，在转换之后)

代替:

.on("end", renderValuesInBars(data, metric, countryID, measurements))

你可以传递一个对函数求值的回调函数:

on("end", ( ) => renderValuesInBars(data, metric, countryID, measurements))

这样你就传递了一个回调，说"在转换结束时，评估renderValuesInBars">

Answer 2

已由4.0版更改

之前是:

element.each("end", callback)

现在是:

element.on("end", callback)