javascript - 在 D3 v4 中，如何正确对齐轴？

Question

我正在使用 D3 v4。我有一个使用 scaleBand() 创建的带有 x 轴的条形图。现在，我已经创建了一个 y 轴，但我的问题是无论我如何定位它，它都会切入图形的实际条形。

在我的 JS 文件的顶部，我有:

可变宽度 = 350； 可变高度 = 300;

然后，我实际创建 Y 轴的部分:

var y = d3.scaleLinear()
      .domain([0, 300000])
      .rangeRound([height, 0]);

var yAxis = d3.axisRight(y);
            yAxis.ticks(6);

chart.append("g")
     .attr("class", "y axis")
     .attr("transform", "translate(" + (width - dist_from_right) + ", 0)")
     .call(yAxis);

从图片中可以看出，轴从下到上延伸了 SVG 的整个高度，这意味着 0 的一半被切断，300,000 的一半被切断。

第一个问题:如何“挤压”(或缩放)y 轴，使其显示在 SVG 的范围内？

接下来，我想平移 y 轴，使其不会切入我的红色条。如果我尝试使用 transform 属性，我可以将轴推到 SVG 边界的右侧，但这意味着数字超出了 SVG 边界。我还尝试增加 width 变量，但这没有任何作用，因为它只是按比例拉伸(stretch) x 轴。

第二个问题:如何移动 y 轴，使其不切入 x 轴和红色条，同时在 SVG 窗口中保持可见？

谢谢!

Answer 1

在D3中，坐标轴根据相应刻度的range定位。所以，你需要一个范围的“填充”。现在，随着您的范围从 0 到 height(反之亦然，这无关紧要)，轴从 SVG 的最开始处开始并结束于一切都结束了。

我看到你有一个 dist_from_right，但我不知道你在 x 尺度上用它做什么。所以，现在，假设您没有任何填充。

首先，让我们设置填充:

var paddingLeft = 10, paddingRight = 10, paddingTop = 10, paddingBottom = 10;

这里，10只是一个给定的数字，相应地改变它。

之后，使用填充设置范围:

var y = d3.scaleLinear()
  .domain([0, 300000])
  .rangeRound([height - paddingBottom, paddingTop]);

你的 x 尺度也是如此:

var x = d3.scaleLinear()
  .domain([0, someValue])
  .rangeRound([paddingLeft, width - paddingRight]);

然后定义轴:

var xAxis = d3.axisBottom(x);//the same for the y axis

有了填充的范围，调用填充的轴设置:

chart.append("g")
 .attr("class", "y axis")
 .attr("transform", "translate(" + (width - paddingRight) + ", 0)")
 .call(yAxis);

x 轴也一样:

chart.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0," + (height - paddingBottom) + ")")
 .call(xAxis);

这是一个工作示例。我将 SVG 设为浅灰色，将绘图区域设为白色，以便您可以看到填充。:

var paddingLeft = 20, paddingRight = 40, paddingTop = 10, paddingBottom = 40;

var width = 300, height = 300;

var chart = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)

chart.append("rect")
  .attr("x", paddingLeft)
  .attr("y", paddingTop)
  .attr("width", width - paddingLeft - paddingRight)
  .attr("height", height - paddingTop - paddingBottom)
  .attr("fill", "white");

var y = d3.scaleLinear()
  .domain([0, 100])
  .rangeRound([height - paddingBottom, paddingTop]);

var x = d3.scaleLinear()
  .domain([0, 100])
  .rangeRound([paddingLeft, width - paddingRight]);

var yAxis = d3.axisRight(y);

var xAxis = d3.axisBottom(x);

chart.append("g")
     .attr("class", "y axis")
     .attr("transform", "translate(" + (width - paddingRight) + ", 0)")
     .call(yAxis);

chart.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + (height - paddingBottom) + ")")
     .call(xAxis);

svg {
  background-color: lightgray;
  }

<script src="https://d3js.org/d3.v4.min.js"></script>