D3.js 堆栈条形图动画数据更改

我这里有一个失物招领-

这是一张有角度的D3图表

“更新”按钮更新图形中的数据并调整轴

如何在数据更改时设置条形图的动画

我有点让它工作，但注释掉了plunker中的代码，因为它停止了轴的工作，并分别为每个块设置了动画，如果可能的话，我想将列设置为一个，并且显然有轴

this.layersBar.selectAll('rect')

    .data((d:any)=>{
        return d;
    })
    .enter()
    .append('rect')
    .attr('y', (d:any)=>{
        return this.y(d[1])
    })
    .attr('x', (d:any, i:any)=>{
        return this.x(d.data.date)
    })
    .attr('width', this.x.bandwidth())
    //.attr('height', 0)
    //.transition()
    .attr('height', (d:any, i:any)=>{
        return this.y(d[0]) - this.y(d[1]);
    })

    .on("mouseover", ()=>{
        d3.select('.chart-tooltip').style("display", null)
    })
    .on("mouseout", ()=>{
        d3.select('.chart-tooltip').style("display", "none")
    })
    .on("mousemove", (d:any)=>{
        d3.select('.chart-tooltip')
            .style("left", d3.event.pageX + 15 + "px")
            .style("top", d3.event.pageY - 25 + "px")
            .text(d[1] - d[0]);
    });

    d3.transition(this.svg).select(".y-axis")
        .transition()
        .duration(1000)
        .call(this.yAxis);

    d3.transition(this.svg).select(".x-axis")
        .transition()
        .duration(1000)
        .call(this.xAxis);
  }

---

这里的问题只是上的方法

D3中有两个同名的不同方法：

selection。on

是您在此处使用的方法，侦听器为

mouseover

或

mouseout

。但是，还有

transition.on

，它没有

mouseover

或

mouseout

作为侦听器

当您使用

transition（）

时，它将返回一个转换选择。因此，您之后在上的

是一个
转换。在
上，不是一个
选择。在
上，您会得到错误：

未知类型：鼠标悬停

解决方案非常简单：打断您的选择（并命名它！）：

这是最新消息：
再次感谢你，杰拉尔多。可以一次性设置整个列的动画，而不设置列中每个块的动画
bars.transition()
    .attr('height', (d:any, i:any)=>{
        return this.y(d[0]) - this.y(d[1]);
    });

bars.on("mouseover", ()=>{
    //etc...