軸ラベルを再フォーマットする方法は？

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

かわりticksのtickFormatを使用する必要があります。ここでは

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

EDIT：代わりに、1月の年を示す場合：

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>