Question

我试图使用d3绘制一些图表，并且希望数据在更新时具有过渡效果，但是我有一个非常奇怪的问题。在代码中，我预先为“ rect”节点设置了“ transition：height 2s”。样式，当我在“ setTimeout”中设置“ height”属性时，它不会每次都触发过渡效果，并且偶尔会失败。我认为，它每次都会触发过渡效果。

const updateBar = totalItem
    .selectAll('rect')
    .data(d => {
        return d.data[0].values.filter((v, i) => valueUnit[i] === this._unit[0])
    })
const addBar = updateBar
    .enter()
    .append('rect')
    .style('height', 0)
    .style('width', 20)
    .style('transition', () => {
        console.log(1)
        return 'height 2s'
    })
    .style('transform', 'rotateX(180deg)')

const totalBar = updateBar.merge(addBar)

// Occasionally fails when the delay is 1 millisecond
setTimeout(() => {
    const that = this
    totalBar
        .style('height', function (d, i) {
            this.id = `a${i}`
            // The strange thing is that although the transition effect is not triggered, there is a "transition: height 2s" style on the "rect" node.
            document.getElementById(`a${i}`) ? console.log(this.style.transition) : console.log('null')
            return that.mainHeight - that._scaleYL(d)
        })
}, 1)

// It can trigger transition effects every time when the delay time is 1000 milliseconds
setTimeout(() => {
    const that = this
    totalBar
        .style('height', function (d, i) {
            this.id = `a${i}`
            document.getElementById(`a${i}`) ? console.log(this.style.transition) : console.log('null')
            return that.mainHeight - that._scaleYL(d)
        })
}, 1000)

updateBar.exit().remove()

为什么“ setTimeout（fn，0）”无法及时触发“转换”

0 个答案: