Question

我这里有一个傻瓜 - https://plnkr.co/edit/ACUqRZqBK9lrF4dfFeqp?p=preview

这是Angular的D3图表

＆＃39;更新＆＃39;按钮更新图表中的数据并调整轴

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

我有点工作，但已经注释了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

堆栈条形图动画数据更改

1 个答案: