自定义d3月份或年份刻度格式

Question

所以我在d3中创建了一个图表并使用了默认的x轴格式

d3.axisBottom(x)

输出以下图表：

如何手动创建和自定义此格式？特别是，我想使用短月份名称，例如＆＃34; 10月和＃34;，以便＆＃34; 10月＆＃34;并没有掩盖下一年的标签。

Answer 1

使用tickFormat格式化x轴上的刻度线。在您的情况下，.tickFormat(d3.timeFormat("%b"))将返回短月份名称（但会使年份消失）。

以下是演示：

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 100)   
            
var xScale = d3.scaleTime()
  .domain([new Date("2014-01-01"), new Date("2016-01-01")])
  .range([0, 450]);
        
var xAxis = d3.axisBottom(xScale)
  .tickFormat(d3.timeFormat("%b"));
  
svg.append("g")
  .call(xAxis);

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

要保留月/年默认功能，您需要创建自己的自定义格式。

var xAxis = d3.axisBottom(xScale)
   .tickFormat(function(date){
       if (d3.timeYear(date) < date) {
         return d3.timeFormat('%b')(date);
       } else {
         return d3.timeFormat('%Y')(date);
       }
    });

查看演示：

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 100)   
            
var xScale = d3.scaleTime()
  .domain([new Date("2014-01-01"), new Date("2016-01-01")])
  .range([0, 500]);

var xAxis = d3.axisBottom(xScale)
  .tickFormat(function(date){
    if (d3.timeYear(date) < date) {
      return d3.timeFormat('%b')(date);
    } else {
      return d3.timeFormat('%Y')(date);
    }
  });
  
svg.append("g")
  .attr("class", "x axis")
  .call(xAxis);
	
d3.selectAll(".ticks");

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