javascript - 图表未显示对象的数据数组
问题描述
我的 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 的新手。
解决方案
这里的问题与 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>
推荐阅读
- javascript - 如何从我的初始页面转到带有 HTML 的新 html 页面
- c++ - 模拟静态函数成员
- scala - sbt run 仅在我选择类时才起作用,而不是在我将其作为参数传递时
- python - 从可用数据结构生成二元决策图
- listview - 删除嵌套属性中的元素时更新 SwiftUI 列表
- python - (Python noob)将一串数字添加到列表时,它被分成数字
- flask - 使用线程运行 gunicorn
- ios - 设置 UIImage 颜色
- java - Liquibase Gradle 插件正在生成的更改日志中删除休眠序列表
- java - Java 将带有自动模块的模块打包到 JAR 中