javascript - D3 軸ラベルの操作

Question

初めて D3 を使用しており、平行座標グラフを作成しようとしています。私は基本的にこのデモを使用しています。私が行った唯一の実際の変更は、データを変更し、右端の軸を変更して、ラベルとして数値ではなく文字列を使用することです。私は以下を使用してこれを行います：

        if(d === "Dog Breed") {
            y[d] = d3.scale.ordinal()
              .domain(dogData.map(function(p) { return p[d]; }))
              .rangePoints([h, 0]);  // quantitative color scale

        }

残念なことに、犬の品種が長すぎると、テキストが途切れてしまい、ラベルを読むのが難しくなります (読むには軸全体を動かさなければなりませんが、離すとすぐに元の位置に戻ります)。最初の場所）。

私の他の変更は次のとおりです。

        var m = [30, 10, 10, 10],
        w = screen.width - 150, // Make it 150px less than the screen's width.
        h = 500 - m[0] - m[2];

軸ラベル コードは、次の場所で同じままです。

          // Add an axis and title.
      g.append("svg:g")
          .attr("class", "axis")
          .each(function(d) { d3.select(this).call(axis.scale(y[d])); })
        .append("svg:text")
          .attr("text-anchor", "middle")
          .attr("y", -9)
          .text(String);

名前が切り取られることを回避する方法はありますか? グラフ自体をブロック内で約 20px ずらすだけでも効果がありますが、そのためのコードがどこにあるのかわかりません...