scaleTime minimalen Tick-Wert

Question

Mit d3 Ich habe eine xAchse definiert als

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); 

Alles sehr gut in der Tat funktioniert.

Allerdings möchte ich, dass die Waage Ticks an einem Minimum von einem Tag zeigt. Da es, wenn fromdata und toDate steht nur ein paar Tage sind Unterschied es zeigen Zecken ....

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

Wie kann ich es nicht die Tageszeit Werte zeigen?

Jede Hilfe wird geschätzt.

Answer 1

Sie können die intervals in der Achse Generator:

Konstruiert ein neues benutzerdefiniertes Intervall den angegebenen Boden und Offset-Funktionen und eine optionale Zählfunktion gegeben.

Zum Beispiel ist dies der Code, wie es ist (die Domain hier nur 3 Tagen hat):

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>

nun der gleiche Code, mit 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: die tickFormat ist nur um den ersten Tick zu ändern, nicht darauf achten.