scaleTime最小刻度值

Question

使用D3我有一個X軸定義爲

var xScale = d3.scaleTime() 
    .domain([fromDate, toDate]) 
    .range([0, width]); 

var xAxis = d3.axisBottom(xScale); 

function customXAxis(g) { 
    g.call(xAxis); 
    g.select(".domain").remove(); 
    g.selectAll(".tick line").attr("stroke", "white"); 
    g.selectAll(".tick text").attr("fill", "white"); 
} 

g.append("g") 
    .attr("transform", "translate(0," + height + ")") 
    .call(customXAxis); 

所有的工作確實非常好。

但是，我希望比例尺至少在一天內顯示刻度。因爲它代表，如果fromData和todate是隻有幾天的差異也顯示蜱....

Mon-10___12PM___Tue-11___12PM___Wed-13___12PM___Thu-14___12PM 

我怎樣才能得到它不顯示的日期值的時間？

任何幫助表示讚賞。

Answer 1

可以設置在軸線發生器intervals：

構建給定指定地板和偏移的功能的新的自定義時間間隔和一個可選的計數功能。

舉例來說，這是你的代碼，因爲它是（這裏的域剛剛3天）：

var svg = d3.select("svg"); 
 

 
var xScale = d3.scaleTime() 
 
    .domain([new Date("January 1, 2017 00:00:00"), new Date("January 4, 2017 00:00:00")]) 
 
    .range([20, 480]); 
 

 
var xAxis = d3.axisBottom(xScale); 
 

 
svg.append("g") 
 
    .attr("transform", "translate(0,100)") 
 
    .call(xAxis);

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

現在相同的代碼，用d3.timeDay：

var svg = d3.select("svg"); 
 

 
var xScale = d3.scaleTime() 
 
    .domain([new Date("January 1, 2017 00:00:00"), new Date("January 4, 2017 00:00:00")]) 
 
    .range([20, 480]); 
 

 
var xAxis = d3.axisBottom(xScale) 
 
    .ticks(d3.timeDay) 
 
    .tickFormat(d=>d3.timeFormat("%a %d")(d)); 
 

 
svg.append("g") 
 
    .attr("transform", "translate(0,100)") 
 
    .call(xAxis);

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

PS：tickFormat只是改變第一個刻度，不關注它。