d3 Zecken zeigt nur Sonntag:

Question

Ich mag für meine Waage am ersten Tag beginnen und nicht am letzten Tag endet als Sonntage nur zeigen:

Ich mag würde für die Daten am Start: 28 (nicht 3) aber es fängt an einer 3 an, die Sonntag ist:

Wie kann ich meine Skala an irgendeinem Tag der Woche beginnen?

Ich möchte, dass die angezeigten Tage mit den Daten übereinstimmen, die ich dem Diagramm nicht zeige.

Link zum Beispiel: http://jsfiddle.net/3LZua/2/

Vielen Dank im Voraus.

P.S. Hier ist der Code: (Es wäre ein in der html)

followerLineGraph = function(data) 
{  
    var width = 400; 

    var x = d3.time.scale() 
     .domain([data[0].date, data[data.length - 1].date]) 
     .range([0, width]); 

    var chart = d3.select("#test").append("svg").attr("class", "chart"); 

    //Date Label 
    var xAxis = d3.svg.axis() 
     .scale(x) 
     .ticks(data.length) 
     .tickFormat(d3.time.format('%m/%d-%a')) 
     .tickSize(0) 
     .tickPadding(8); 

    chart.append('g') 
     .attr('fill', '#1ff') 
     .call(xAxis); 
} 

    var data = [ 
     { date: new Date(2013, 1, 28), TotalLikes: 18 }, 
     { date: new Date(2013, 2, 14), TotalLikes: 15 }, 
     { date: new Date(2013, 2, 21), TotalLikes: 17 }, 
     { date: new Date(2013, 2, 28), TotalLikes: 17 }, 
     { date: new Date(2013, 3, 4), TotalLikes: 20 } 
]; 

followerLineGraph(data); 

Answer 1

Sie haben hier ein paar Möglichkeiten.

Durch den Aufruf von "Ticks" auf der Achse werden die Argumente an die zugrunde liegende Skala übergeben, um Listenlisten für die zu zeichnende Achse zu erhalten. Wenn Sie einen einzelnen numerischen Wert übergeben, versucht die Waage, "nette" Werte zu erzeugen. Der numerische Wert ist ein Hinweis darauf, wie viele Ticks Sie am besten mögen - es ist keine Garantie für die Anzahl, die Sie tatsächlich erhalten.

.ticks(5) 

Ergebnisse in: 03.03-So 10.03-So 17.03-So 24.03-So 31.03-So

Weil Sie eine Zeitskala verwenden auch Sie die Möglichkeit, die Höhe der Zeit zwischen Ticks angeben, zB:

.ticks(d3.time.days,7) 

Ergebnisse in: 01.03-Fr 08.03-Fr 15.03-Fr 22.03-Fr 29.03-Fr 04/01-Mon

Dies wird giv Sie alle 7 Tage ein Häkchen. Aber ich denke, es wird immer noch versuchen, "schöne" Zeitgrenzen wie den Monatstart einzubeziehen.

Für fein getunnelte (aber etwas statische) Situationen können Sie genau angeben, wo Ihre Ticks die tickValues-Methoden auf der Achse verwenden sollen. Ich habe es genau alle Termine Ihres Datenpunktes zu setzen:

xAxis2.tickValues(data.map(function(d) { return d.date;})) 

Schließlich können Sie tatsächlich in einem Argumente übergeben, um die Zecken genau die Zecken bekommen funktionieren möchten, dass Sie jedes Mal. Die Funktion wird den Start bekommen und so die Zecken auf diejenigen zu setzen beenden und den Mittelpunkt ich getan habe:

xAxis3.ticks(function(start, end) { 
    console.log(arguments); 
    var mid = new Date((start.getTime() + end.getTime())/2); 

Obwohl in diesem Fall, dass Sie wahrscheinlich die Funktion auf der Skala einstellen sollten, so können Sie die Verwendung des Schrittes machen Argumente durch Aufruf über die Achse (siehe mehr in der d3-Dokumentation).

Sie können mit der Geige here spielen.

Überprüfen Sie auch die Dokumentation für die scale ticks und die axis tickValues. Es gibt auch eine große Achse Tutorial here.

Answer 2

Ich hatte gerade ein sehr ähnliches Problem und konnte in der d3-Dokumentation keine Antwort finden.Allerdings nahm ich an dem d3-Quellcode einen Blick (https://github.com/mbostock/d3/blob/master/d3.js) und ich war in der Lage die folgende Zeile zu finden:

d3.time.weeks = d3.time.sunday.range; 

Mit diesem Hinweis beachten: Man beachte, dass, wie es in der Dokumentation beschrieben,

var xAxis = d3.svg.axis() 
    .scale(x) 
    .ticks(d3.time.weeks, 1); 

gibt eine Achse mit einem Haken an jedem Sonntag - und so

var xAxis = d3.svg.axis() 
    .scale(x) 
    .ticks(d3.time.xxxday.range, 1); 

gibt eine Achse mit einem Häkchen auf jedem xxxday, wo xxxdaymonday, tuesday, wednesday, thursday, friday, saturday oder sunday.