Question

我第一次使用D3，我正在尝试制作一个平行坐标图。我基本上使用的是this demo。我唯一真正的改变是改变数据并改变最右边的轴，所以它有字符串而不是数字作为标签。我这样做是通过使用以下内容：

        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

修复是操纵温暖在m [3]左侧有更多。

操纵D3轴标签

1 个答案: