Question

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

它是Angular 4组件中的堆积条形图

我在x域中遇到创建x轴的问题

目前，酒吧占据了整个图表的宽度。

private drawChart(data:any){
    this.layersBar = this.layersBarArea.selectAll('.layer')
        .data(data)
        .enter()
        .append('g')
        .classed('layer', true)
        .style('fill', (d:any,i:any)=>{
            return this.colors[i]
        });

    this.x.domain(data.map((d:any)=>{
        //return d.date;
    }));

    this.y.domain([0, +d3.max(this.stackedSeries, function(d:any){
        return d3.max(d, (d:any)=>{
            return d[1]
        })
    })]);

    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.date
        })

        .attr('width', this.x.bandwidth())
        .attr('height', (d:any, i:any)=>{
            return this.y(d[0]) - this.y(d[1]);
        })
}

Answer 1

对我而言，这是一个谜，你要问为什么x域无效。你可以清楚地看到你在这里没有回复任何东西：

this.x.domain(data.map((d:any)=>{
    //return d.date;
}));

这使得x域undefined。

您必须返回d.date。但是，最重要的是，您必须更改数据：data是堆叠数据。而不是那样，你想使用this.data：

this.x.domain(this.data.map((d:any)=>{
    return d.date
}));

最后，您将x位置设置错误。它应该是：

.attr('x', (d:any, i:any)=>{
    return this.x(d.data.date)
})

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

PS：你的按钮不起作用。

Answer 2

问题出在此代码块中。

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.date
        })

        .attr('width', this.x.bandwidth())
        .attr('height', (d:any, i:any)=>{
            return this.y(d[0]) - this.y(d[1]);
        })

你有.attr('width', this.x.bandwidth())的地方，这决定了酒吧应该有多宽。由于我不知道您希望它们有多宽，因此您只需将this.x.bandwith()更改为适合您的内容。

D3 - x域无效

2 个答案: