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

Question

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

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

var width = 350;    var height = 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的一半被切掉。

第一个问题：我如何＆＃34;挤压＆＃34; （或缩放）y轴，使其显示在SVG的范围内？

接下来，我想翻译y轴，使其不会切入我的红色条。如果我尝试使用transform属性，我可以将轴推到SVG边界的右侧，但这意味着数字不在SVG边界。我也试图增加width变量，但这没有任何作用，因为它只是按比例拉伸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>