堆栈条形图动画数据更改

Question

我在这里有一个plunker -https：//plnkr.co/edit/acuqrzqbk9lrf4dffeqp?p=preview

>

这是Angular

中的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);
  }

Answer 1

这里的问题只是方法on。

D3中有两种不同的方法：selection.on是您在此处使用的方法，以mouseover或mouseout为单位。但是，还有transition.on，它没有mouseover或mouseout作为侦听器。

使用transition()时，它将返回过渡选择。因此，您之后拥有的on是transition.on，而不是selection.on，您会收到错误：

未知类型：Mouseover

解决方案非常简单：打破选择(并命名！(：

bars.transition()
    .attr('height', (d:any, i:any)=>{
        return this.y(d[0]) - this.y(d[1]);
    });
bars.on("mouseover", ()=>{
    //etc...

这是更新的plunker：https：//plnkr.co/edit/pq9hdlsgvmymfrecfg6f?p=Preview