操縱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也會有所幫助，但我不知道該代碼在哪里...

Answer 1

解決方法是操縱var m在m [3]的左側有更多的位置。