在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的一半被切除。

第一个问题：如何“挤压”（或缩放）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>