Javascript 在D3V4中，如何正确对齐轴？

我使用的是D3V4。我使用

scaleBand（）

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

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

var宽度=350； var高度=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的一半被切断，300000的一半被切断

第一个问题：如何“挤压”（或缩放）y轴，使其显示在SVG的范围内

接下来，我想平移y轴，这样它就不会切入我的红色条。如果我尝试使用

transform

属性，我可以将轴推到SVG边界的右侧，但这意味着数字离开了SVG边界。我还尝试增加

宽度

变量，但没有效果，因为它只是按比例延伸x轴

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

---

谢谢

在D3中，轴根据相应刻度的

范围进行定位。因此，需要为范围添加“填充”。现在，当您的范围从
0
到
height
（反之亦然，这无关紧要）时，轴从SVG的最开始处开始，在其最末端结束

我看到你有一个从右到右的
距离，但我不知道你在x刻度上用它做什么。现在，让我们假设你没有任何填充物

首先，让我们设置填充物：

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

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

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

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

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

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

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

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

同样适用于您的x刻度：

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

然后定义轴：

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

使用填充范围，调用填充的轴设置：

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

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

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；
变量宽度=300，高度=300；
var图表=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
图表.附加（“rect”）
.attr（“x”，填充左）
.attr（“y”，paddingTop）
.attr（“宽度”，宽度-填充左-填充右）
.attr（“高度”，高度-填充顶部-填充底部）
.attr（“填充”、“白色”）；
变量y=d3.scaleLinear（）
.domain（[01100]）
.rangeRound（[高度-填充底部，填充顶部]）；
var x=d3.scaleLinear（）
.domain（[01100]）
.rangeRound（[paddingLeft，width-paddingRight]）；
var yAxis=d3.轴右（y）；
var xAxis=d3.axisBottom（x）；
图表.附加（“g”）
.attr（“类”、“y轴”）
.attr（“transform”、“translate”（+（width-paddingRight）+”，0）”）
.呼叫（yAxis）；
图表.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度-填充底部）+”）
.呼叫（xAxis）
svg{
背景颜色：浅灰色；
}
我认为你应该创建一个完美的解决方案，解决我的问题。非常感谢你的帮助！