代码之家  ›  专栏  ›  技术社区  ›  ttmt

D3-位置第二X轴标签

  •  0
  • ttmt  · 技术社区  · 6 年前

    我在这里有一个斯塔克布利茨- https://stackblitz.com/edit/d3-stacked-trend-bar-positioned-months-1b93nz?file=src%2Fapp%2Fbar-chart.ts

    我有一个用D3表示角度的堆积条形图。

    我试图在X轴上放置第二轴标签。

    目前我正在使用的图形的with,但这意味着标签不能正确地与条形图对齐。

    有没有更好的D3方法来添加这些标签并将它们定位。

    1 回复  |  直到 6 年前
        1
  •  1
  •   rioV8    6 年前

    使用条形图的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)");
        }