Wie wird das ternäre bedingte Objekt in der Schleife verwendet?

Question

Ich bin neu mit D3.JS und ich möchte einige Daten in einem Diagramm visualisieren. Die Daten werden in einem Objekt gespeichert. Ich möchte ein Diagramm mit Tag & Nachttemperaturen machen. Es ist, wie unten in dem Objekt gespeichert:

{ 
"datum": "2016-09-11", 
"day": "22", 
"night": "16" 
}, 

ich einen ternären Zustand verwendet habe zwischen ‚Tag‘ und ‚Nacht‘ jedes Mal, es Loops und rettete den Wert in einer Variablen (Schlüssel) zu verschieben, so kann ich Es um den Schlüsselwert aus dem Datenobjekt zu erhalten. Aber irgendwie funktioniert es nicht .. Kann jemand sehen, was ich hier falsch mache? Ich hoffe mein problem ist klar .. hier der volle code:

var i; 

var barOffset = 10; 
var barSpacing = 20; 

d3.json('weather.json', function (data) { 
    console.table(data); 

    for (i = 0; i < 14; i++) { 

    var key = i % 2 === 0 ? 'night' : 'day'; 

    console.log(data.length); 

     d3.select('svg') 
     .append('rect') 
     .attr('x', barOffset * (i *2)) 
     .attr('y', 400 - 4*data[i][key]) 
     .attr('width', barSpacing) 
     .attr('height', 4*data[i][key]) 
     .attr('class', i % 2 === 0 ? 'night' : 'day'); 

    } 
}); 

ich hoffe jemand kann mir helfen! Vielen Dank! :)

Answer 1

d3 liefert seine eigene Art und Weise (ziemlich) die Notwendigkeit „für“ Schleifen zu negieren, die das selection.data(data).enter() Muster, die Sie Funktionen verwenden können SVG-Elemente zu bestimmen, Eigenschaften und Attribute.

Vor dem d3.json Aufruf definieren Ihr svg Element:

var svg=d3.select('svg').attr('width',500).attr('height',500); 

Dann statt einer for-Schleife können Sie so etwas wie, in Ihrem d3.json Telefonierens:

//once for the day 

svg.selectAll('rect.day').data(data) 
.enter() 
.append('rect') 
.attr('x', function(d,i) {return barOffset * (i * 4);}) 
.attr('y', function(d,i) {return 400 - 4*d.day;}) 
.attr('width', barSpacing) 
.attr('height', function(d,i) {return 4*d.day;}) 
.attr('class', "day"); 

//again for the night... 

svg.selectAll('rect.night').data(data) 
.enter() 
.append('rect') 
.attr('x', function(d,i) {return barOffset * (i * 4 + 2);}) 
.attr('y', function(d,i) {return 400 - 4*d.night;}) 
.attr('width', barSpacing) 
.attr('height', function(d,i) {return 4*d.night;}) 
.attr('class', "night"); 

JSBin: http://jsbin.com/luleze/edit?css,js,output

Answer 2

Von dem, was ich verstehe, haben Sie 7 Tage im Wert von Daten, aber sind an 14 Tagen looping. Also nach 7 Tagen ist data[i] undefiniert, daher der Fehler.

Versuchen mit:

for (i = 0; i < 7; i++) { 
    ["night", "day"].forEach(function(key) { 
    d3.select('svg') 
     .append('rect') 
     .attr('x', barOffset * (i *2)) 
     .attr('y', 400 - 4*data[i][key]) 
     .attr('width', barSpacing) 
     .attr('height', 4*data[i][key]) 
     .attr('class', key); 
    }); 
}