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

Question

我是 D3.JS 的新手，我想在图表中可视化一些数据。数据存储在对象中。我想制作一个包含昼夜温度的图表。它存储在对象中如下：

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

每次循环时，我都使用三元条件在 'day' 和 'night' 之间转换，并将值保存在变量（键）中，这样我就可以用它来获取键值从数据对象。但不知何故它不起作用..任何人都可以看到我在这里做错了什么吗？我希望我的问题很清楚。这里是完整的代码：

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

  }
});

希望有人能帮助我！谢谢！ :)

Answer 1

据我了解，您有 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);
  });
}

Answer 2

d3 提供了自己的方式来否定（几乎）对 "for" 循环的需要，这是 selection.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: http://jsbin.com/luleze/edit?css,js,output

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

How to use ternary conditional on object in loop?

object

d3.js

key

ternary-operator