在D3 v4中，我应该如何正确对齐坐标轴？

Question

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

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

变种宽度= 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的一半被切断，30万的一半被切断。

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