如何在循環中使用三元條件對象？

我是D3.JS的新手，想要在圖形中顯示一些數據。數據存儲在一個對象中。我想要在夜間氣溫爲&的情況下製作一張圖表。它存儲在如下對象：如何在循環中使用三元條件對象？

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

我用一個三元條件每次循環時間「天」和「夜」之間的轉移，並在一個變量中保存的值（鍵），所以我可以使用它從數據對象中獲取關鍵值。但不知何故，它不工作..任何人都可以看到我在這裏做錯了嗎？我希望我的問題很清楚..這裏的完整代碼：

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

    } 
});

我希望有人能幫助我！謝謝！ :)

來源

2016-09-14 Camille Sébastien Niessen

您可以使用'.enter（data）'實現相同的功能併爲attr提供函數h採取索引和數據 –

如果你能解釋更多什麼「不起作用」，這可以幫助:) – Benjamin

@Benjamin該圖表只顯示4天（白天和夜晚）的溫度，但它應該顯示7天。 8循環後說：Uncaught TypeError：無法讀取未定義的屬性'夜' - 我認爲這是與'數據[我] [關鍵]'出錯 –

D3提供它自己的方式來否定（幾乎）的需要「for」循環，這是selection.data(data).enter()模式，它允許您使用函數來確定SVG元素屬性和屬性。

的d3.json調用之前定義svg元素：

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

然後，而不是使用一個for循環，你可以這樣做，你的d3.json調用內部的：

//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

來源

2016-09-15 12:50:11 danimal

據我所知，你有7天的價值的數據，但循環14天。所以7天后，data[i]是未定義的，因此錯誤。

嘗試：

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

來源

2016-09-14 22:18:03 Benjamin

非常感謝，現在效果很好！ :) –

如何在循環中使用三元條件對象？

回答

相關問題