Verwenden D3.js Einzelliniendiagramm selber Tag, aber unterschiedliche Temperaturen

Question

Ich habe diese einfachen d3.js einzelne Liniendiagramm angezeigt werden, die mehrere Termine für die x-Achse ist die Anzeige:

<script> 

// Parse the date/time 
var parseDate = d3.time.format("%d-%b-%y").parse; 

// Set the ranges 
var x = d3.time.scale().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

// Define the axes 
var xAxis = d3.svg.axis().scale(x) 
.orient("bottom"); 

var yAxis = d3.svg.axis().scale(y) 
.orient("left").ticks(5); 

// Define the line 
var valueline = d3.svg.line() 
.x(function(d) { return x(d.date); }) 
.y(function(d) { return y(d.close); }); 

// Adds the svg canvas 
var svg = d3.select("#air_temp_chart") 
.append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
.append("g") 
    .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

// Get the data 
d3.csv("data.csv", function(error, data) { 
data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    d.close = +d.close; 
}); 

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

xAxis 
.tickValues(tickValues) 
.tickFormat(d3.time.format('%H:%M')); 

// Scale the range of the data 
x.domain(d3.extent(data, function(d) { return d.date; })); 
y.domain([0, d3.max(data, function(d) { return d.close; })]); 

// Add the valueline path. 
svg.append("path") 
    .attr("class", "line") 
    .attr("d", valueline(data)); 

// Add the X Axis 
svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

// Add the Y Axis 
svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 

});

data.csv:

date,close 
1-May-12,58.13 
30-Apr-12,53.98 
27-Apr-12,67.00 

Ich mag würde, die Daten zu ändern, so dass das Datum für alle gleich ist, aber die Zeiten und Temperaturwerte sind unterschiedliche Werte.

änderte ich die time.format Linie:

var parseDate = d3.time.format("%d-%b-%y %H").parse; 

die Zeiten mit den Lesungen zu schließen, ohne die grafische Darstellung bricht, wenn ich dies tun.

Ich mag diese Daten mit dem gleichen Datum verwenden, aber unterschiedlichen Zeiten und Temperaturwerten:

1-May-12 06:00,58.13 
1-May-12 06:30,53.98 
1-May-12 07:00,67.00 

Wie kann ich den x-Achsen-Code modifiziere oben mit den Werten zu arbeiten?

Answer 1

Sie können spezifische Tick-Werte angeben, die in einem d3-Diagramm angezeigt werden.

Erstens korrigieren Sie Ihre Datumsparser:

var parseDate = d3.time.format("%e-%b-%y %H:%M").parse; // %e instead of %d 

Zuerst müssen Sie die Liste der Zecke Werte Sie anzeigen möchten, erhalten. Nachdem Sie die csv und verarbeitet sie geladen haben, extrahieren Sie die Werte Zecke und ordnen sie Ihre xAxis:

d3.csv("data.csv", function(error, data) { 
    data.forEach(function(d) { 
     d.date = parseDate(d.date); 
     d.close = +d.close; 
    }); 
    var tickValues = data.map(function(d) { return d.date; }); 

    xAxis 
     .tickValues(tickValues) 
     .tickFormat(d3.time.format('%H:%M')); 

Vergessen Sie nicht, die ticks auf Ihrem aktuellen xAxis Definition zu entfernen.