Object 如何在循环中的对象上使用三元条件？

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

  }
});

vari；
var barOffset=10；
var barSpacing=20；
d3.json（'weather.json'，函数（数据）{
控制台.表格（数据）；
对于（i=0；i<14；i++）{
var key=i%2==0？'night'：'day'；
console.log（data.length）；
d3.选择（“svg”）
.append（'rect'）
.attr（'x'，barOffset*（i*2））
.attr（'y'，400-4*数据[i][key]）
.attr（'宽度'，条形间距）
.attr（'height'，4*数据[i][key]）
.attr（'class'，i%2==0？'night'：'day'）；
}
});

---

我希望有人能帮助我！谢谢！：）

据我所知，您有7天的数据，但要循环14天。因此，7天后，

数据[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);
  });
}

（i=0；i<7；i++）的

{
[“夜”、“日”].forEach（功能（键）{
d3.选择（“svg”）
.append（'rect'）
.attr（'x'，barOffset*（i*2））
.attr（'y'，400-4*数据[i][key]）
.attr（'宽度'，条形间距）
.attr（'height'，4*数据[i][key]）
.attr（“类”，键）；
});
}

据我所知，您有7天的数据，但循环时间为14天。因此，7天后，

数据[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);
  });
}

（i=0；i<7；i++）的

{
[“夜”、“日”].forEach（功能（键）{
d3.选择（“svg”）
.append（'rect'）
.attr（'x'，barOffset*（i*2））
.attr（'y'，400-4*数据[i][key]）
.attr（'宽度'，条形间距）
.attr（'height'，4*数据[i][key]）
.attr（“类”，键）；
});
}

d3提供了自己的方法来消除（几乎）对“for”循环的需求，这是

选择.data（data）.enter（）

模式，它允许您使用函数来确定svg元素的属性和属性

在调用

d3.json

之前，定义

svg

元素：

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

然后，您可以在

d3.json

调用中执行以下操作，而不是使用for循环：

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

---

d3提供了自己的方法来消除（几乎）对“for”循环的需求，这是

选择.data（data）.enter（）

模式，它允许您使用函数来确定svg元素的属性和属性

在调用

d3.json

之前，定义

svg

元素：

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

然后，您可以在

d3.json

调用中执行以下操作，而不是使用for循环：

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

---

您可以使用

。输入（数据）

并向attr提供获取索引和数据的函数。如果您能解释一下什么“不起作用”，这可能会有所帮助：）@Benjamin该图仅显示4天（白天和夜晚）的温度，但应该显示7天。在8个循环之后，它说：uncaughttypeerror：无法读取未定义的属性'night'-我认为是'data[I][key]出错了是的，错误不在三元条件下。这与你的

数据[i]

不存在有关。你可以使用

实现同样的功能。输入（数据）

并向attr提供函数，这些函数会获取索引和数据如果你能解释一下什么“不起作用”，这可能会有所帮助：）@Benjamin该图仅显示4天（白天和晚上）的温度，但它应该显示7天。在8个循环之后，它说：uncaughttypeerror：无法读取未定义的属性'night'-我认为是'data[I][key]出错了是的，错误不在三元条件下。这与您的

数据[i]

不存在有关。