如何在D3中每年生成軸勾號？

下面的代碼似乎當我的數據通過幾年的跨越工作，但是當只有幾年的數據（比如說3年）則顯示月？

var xAxisScale = d3.scaleTime() 
    .domain([new Date(min, 0, 1, 0), new Date(max, 0, 1, 0)]) 
    .rangeRound([100,width]) 

xAxisScale.ticks(d3.timeYear.every(1));

來源

2016-09-22 user3562812

您可以設定明確使用tickFormat蜱格式的軸發電機::

xAxis.tickFormat(d3.timeFormat("%Y"));

檢查片段中，第一軸進入2000年至2016年，第二個2014至16年。第三個是相同的，但ticks(d3.timeYear)保持每年只有1個滴答：

var width = 400, height = 200; 
 

 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 

 
var xAxisScale1 = d3.scaleTime() 
 
    .domain([new Date(2000, 0, 1), new Date(2016, 0, 1)]) 
 
    .rangeRound([20,width - 20]); 
 

 
var xAxisScale2 = d3.scaleTime() 
 
    .domain([new Date(2014, 0, 1), new Date(2016, 0, 1, 0)]) 
 
    .rangeRound([20,width - 20]); 
 

 
var xAxis1 = d3.axisBottom(xAxisScale1); 
 

 
var xAxis2 = d3.axisBottom(xAxisScale2).tickFormat(d3.timeFormat("%Y")); 
 

 
svg.append("g").call(xAxis1); 
 

 
svg.append("g").attr("transform", "translate(0,40)").call(xAxis2); 
 

 
svg.append("g").attr("transform", "translate(0,80)").call(xAxis2.ticks(d3.timeYear));

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

來源

2016-09-22 22:08:49

如何在D3中每年生成軸勾號？

回答

相關問題