Wie man Achsen alle 6 Monate mit d3.scaleTime rendert/formatiert?

Question

Ich versuche, Diagramm wie this, mit d3.js v.4 zu machen. Aber Daten, die ich habe, sind zweimal im Jahr, unterscheiden sich mit dem gegebenen Beispiel. Wie render Achsen für alle 6 Monate? Meine Daten sind jeden Februar und August für jedes Jahr (2008-2015).

Answer 1

Stellen Sie Ihre x-Linie mit scaleTime und startDate und endDate ein, wenn Sie eine Achse erstellen, können Sie eine interval with filter an tick func übergeben. Bei Bedarf können Sie den Achsenstrich auch mit tickFormat formatieren.

Hier Beispiel Coffee

timeParse= d3.timeParse('%m-%Y'); 
startDate= timeParse('02-2008'); 
endDate= timeParse('08-2015'); 
x= d3.scaleTime() 
    .domain d3.extent d3.timeMonth.range startDate, endDate, 6 
    .range [0, 700]; 
xAxis= d3.axisBottom(x) 
    .ticks d3.timeMonth.filter (xDate)-> 
    # january is 00 
    # console.log 'getMonth: ', xDate.getMonth(); 
    if xDate.getMonth() is 1 or xDate.getMonth() is 7 
     true; 
    else 
     false; 
    .tickFormat d3.timeFormat '%b %Y'; 

svg.append 'g' 
    .attr 'class', 'axis-group' 
    .attr 'transform', "translate(0, 300)" 
    .call xAxis; 

Ausgabe mit: der

beachten, dass der Sperrbereich als here

Referenz beschreiben ausgeschlossen:

1. Month Axis