javascript - 图表未显示对象的数据数组

Question

我的 D3 js 图表没有显示数据，请指导我如何正确填充线和区域中的数据，

数据代码——这就是我生成数据的方式

var data = [];
var currentValue = 0;
var random = d3.random.normal(0, 20);
var obj = {};
for (var i = 0; i < 20; i++) {
  var currentDate = new Date();
  currentDate.setDate(currentDate.getDate() + i);

  if (i === 0) {
    currentValue = 0;
  } else if (i === 1) {
    currentValue = 0;
  } else if (i === 5) {
    currentValue = 0;
  } else if (i === 10) {
    currentValue = 0;
  } else if (i === 19) {
    currentValue = 0;
  } else {
    currentValue = currentValue + random();
  }
  obj.startTime = currentDate;
  obj.magnitude = currentValue;
  data.push(obj);
}

console.log(data);

我这里有一个代码沙箱，请指导我 - https://codesandbox.io/s/frosty-tu-18isr

谢谢。我是 D3js 的新手。

Answer 1

这里的问题与 D3 无关，这只是对象引用在 Javascript 中的工作方式。当你这样做时......

obj.startTime = currentDate;
obj.magnitude = currentValue;
data.push(obj);

...您正在更改同一个对象，就是这个...

var obj = {};

... 并将其推送到 data 数组。因此，所有属性都是相同的(最后一次迭代)。我们可以很容易地证明它。看看这个数组，它有 10 个对象:

const obj = {foo:42};
const myArray = d3.range(10).map(()=>obj);
console.log(JSON.stringify(myArray))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

现在让我们只更改第三个对象:

myArray[2].foo = 17;

但是，这将改变所有这些:

const obj = {foo:42};
const myArray = d3.range(10).map(()=>obj);
myArray[2].foo = 17;
console.log(JSON.stringify(myArray))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

发生这种情况是因为它们都是对同一对象的引用。

解决方案:最简单的解决方案就是在每次迭代时推送整个对象，一个新对象:

data.push({startTime : currentDate, magnitude: currentValue});

这是演示:

var data = [];
var currentValue = 0;
var random = d3.random.normal(0, 20);
for (var i = 0; i < 20; i++) {
  var currentDate = new Date();
  currentDate.setDate(currentDate.getDate() + i);

  if (i === 0) {
    currentValue = 0;
  } else if (i === 1) {
    currentValue = 0;
  } else if (i === 5) {
    currentValue = 0;
  } else if (i === 10) {
    currentValue = 0;
  } else if (i === 19) {
    currentValue = 0;
  } else {
    currentValue = currentValue + random();
  }
  data.push({
    startTime: currentDate,
    magnitude: currentValue
  });
}

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>