Question

我是D3.JS的新手，我希望在图表中可视化一些数据。数据存储在对象中。我想用day＆amp;做一个图表。夜间气温。它存储在对象中，如下所示：

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

我使用三元条件在“白天”之间转换。和'晚上＆＃39;每次循环并将值保存在变量（键）中，以便我可以使用它从数据对象中获取键值。但不知怎的，它不起作用..任何人都可以看到我在这里做错了什么吗？我希望我的问题很清楚..这里有完整的代码：

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

d3提供了自己的方式来否定（几乎）需要＆＃34;对于＆＃34;循环，这是selection.data(data).enter()模式，它允许您使用函数来确定svg元素＆＃39;属性和属性。

在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： animate

Answer 2

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

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

2 个答案: