Question

我这里有个突如其来的飞车-https://stackblitz.com/edit/d3-stacked-trend-bar-positioned-months-1b93nz?file=src%2Fapp%2Fbar-chart.ts

我有一个在Angular中使用D3的堆积条形图。

我正在尝试在x轴上放置第二个标签轴。

当前我正在使用图形的with，但这意味着标签与条形图没有正确对齐。

是否有更好的D3方法来添加这些标签并使其正定。

Answer 1

使用条形图的x位置并将文本放置在条形图的中间。

  private drawBarTitle(data:any){
      this.chart.append('g')
        .attr("transform", "translate(" + 10 + "," + (this.height+10) + ")")
          .selectAll('g')
          .data(data)
          .enter()
          .append('g')
      .attr('transform', (d:any, i:any)=>{
        var x = this.x(d.date) + (i%2) * 0.525 * this.x.bandwidth();
        return "translate(" + (x + this.x.bandwidth()*0.95*0.25) + "," + 0 + ")"
      })

      .append('text')
      .text((d:any, i:any)=>{ return d.type; })
      .attr("dy", "-0.3em")
      .classed('trend-type', true)
      .style("text-anchor", "end")
      .attr("transform", "rotate(-90)");
    }

D3-放置第二个x轴标签

1 个答案: