如何重新格式化軸標籤？

Question

我已經開始學習D3，許多教程都是爲v3編寫的。我通讀了很多v4的文檔，但我無法圍繞如何格式化我的軸標籤。現在我的可視化效果如下：

重疊的月份並不理想。我知道我可以使用d3's timeFormat並使用「％b」來使用縮短的月份。但我不知道它是如何適應語法在我的底軸代碼：

svg.append("g") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x) 
    .ticks(d3.timeMonth.every(4))); 

我就已經預料到是這樣的

format = d3.time.format("%b") 
svg.append("g") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x) 
    .ticks(format(d3.timeMonth.every(4)))); 

但是，這並不正常工作。我知道這可能很簡單，但我沒有得到它。

Answer 1

您應該使用tickFormat而不是ticks：

.tickFormat(d3.timeFormat("%b")) 

這裏是一個演示：

var svg = d3.select("svg") 
 
var scale = d3.scaleTime() 
 
    .range([20, 480]) 
 
    .domain([new Date(), new Date().setYear(new Date().getFullYear() + 1)]); 
 

 
var axis = d3.axisBottom(scale) 
 
    .tickFormat(d3.timeFormat("%b")) 
 
    .ticks(d3.timeMonth); 
 

 
svg.append("g") 
 
    .attr("transform", "translate(0,50)") 
 
    .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg width="500"></svg>

編輯：用於顯示年，而不是01月：

var svg = d3.select("svg") 
 
var scale = d3.scaleTime() 
 
    .range([20, 480]) 
 
    .domain([new Date(), new Date().setYear(new Date().getFullYear() + 1)]); 
 

 
var axis = d3.axisBottom(scale) 
 
    .tickFormat(function(d) { 
 
    return d3.timeFormat("%b")(d) === "Jan" ? 
 
     d3.timeFormat("%Y")(d) : d3.timeFormat("%b")(d); 
 
    }) 
 
    .ticks(d3.timeMonth); 
 

 
svg.append("g") 
 
    .attr("transform", "translate(0,50)") 
 
    .call(axis)

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg width="500"></svg>