Question

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

我在Angular中有一个简单的D3条形图。

我希望条形高度从底部向上动画。

在我的例子中，他们从顶部向下动画。

我确定这是一个简单的解决办法，但我已经陷入困境。

    private drawBars() {
        this.g.selectAll(".bar")
            .data(this.data)
            .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("x", (d) => this.x(d.letter) )
            .attr("width", this.x.bandwidth())
            .attr("height", 0)
            .transition()
            .duration(200)
            .delay((d, i) => {
                return i * 50;
            })
            .attr("y", (d) => this.y(d.frequency) )
            .attr("height", (d) => this.height - this.y(d.frequency) )
            .attr('fill', (d, i)=>{
              return this.colors[i]
            });
    }

Answer 1

在转换之前，没有指定的y属性。因此，y采用默认值0，这是SVG的顶部。

因此，您只需在调用y之前设置transition()属性：

.attr("y", this.height )

以下是更新的plunker：https://plnkr.co/edit/xXBwGpu0zHIjj9GAzanb?p=preview

角度D3条形图动画

1 个答案: