在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>