D3.jsで、X軸の項目が表示幅より長い場合は斜めに表示する

harada 20views 更新:2017年6月22日

translate(" + this.getBBox().height/2*-1 + "," + this.getBBox().height + ")rotate(-45)で斜めにすることができます。

たとえば以下のように記述します。

var adjust_width = 800;//グラフの描画幅
var x = d3.scale.ordinal().rangeRoundBands([0, adjust_width], width_proporion);
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickPadding(10);

    svg.append("g")
        .attr("class", "x axis")
        .style("fill", "#FFF")
        .attr("transform", "translate(0," + adjust_height + ")")
        .call(xAxis);

    svg.selectAll(".x text")
      .attr("transform", function(d) {
          if(this.getBBox().width * gdp.length > adjust_width) {
              return "translate(" + this.getBBox().height/2*-1 + "," + this.getBBox().height + ")rotate(-45)";
          } else {
              return "translate(0,0)";
          }
      });

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません