D3在CSV文件中加载,然后仅使用特定列
我很难从CSV文件中获得两列,我正计划用它来构建一个基本的条形图。我计划在一个数组中得到两个数组(每列一个),这样我就可以用它来构建条形图。正如你所知道的,刚刚开始学习D3 当前在中加载数据会使我得到一个对象数组,这对于获得两列键值对来说是一个混乱。我不确定我的想法是否正确 我看到类似的问题:D3在CSV文件中加载,然后仅使用特定列,csv,d3.js,Csv,D3.js,我很难从CSV文件中获得两列,我正计划用它来构建一个基本的条形图。我计划在一个数组中得到两个数组(每列一个),这样我就可以用它来构建条形图。正如你所知道的,刚刚开始学习D3 当前在中加载数据会使我得到一个对象数组,这对于获得两列键值对来说是一个混乱。我不确定我的想法是否正确 我看到类似的问题: 但是我如何使用selections和enter()来实现我的目标呢?您不能只加载两列更大的CSV,但您可以加载整个内容并提取所需的列 假设您的csv如下所示: col1,col2,col3,col4 a
但是我如何使用selections和enter()来实现我的目标呢?您不能只加载两列更大的CSV,但您可以加载整个内容并提取所需的列 假设您的csv如下所示:
col1,col2,col3,col4
aaa1,aaa2,aaa3,aaa4
bbb1,bbb2,bbb3,bbb4
ccc1,ccc2,ccc3,ccc4
然后你把它装上
csv('my.csv', function(err, data) {
console.log(data)
/*
output:
[
{ col1:'aaa1', col2:'aaa2', col3:'aaa3', col4:'aaa4' },
{ col1:'bbb1', col2:'bbb2', col3:'bbb3', col4:'bbb4' },
{ col1:'ccc1', col2:'ccc2', col3:'ccc3', col4:'ccc4' }
]
*/
})
如果您只想要col2
和col3
(并且您不想简单地将其他列的数据留在那里,这无论如何都不应该是一个问题),您可以执行以下操作:
var cols2and3 = data.map(function(d) {
return {
col2: d.col2,
col3: d.col3
}
});
console.log(cols2and3)
/*
output:
[
{ col2:'aaa2', col3:'aaa3' },
{ col2:'bbb2', col3:'bbb3' },
{ col2:'ccc2', col3:'ccc3' }
]
*/
也就是说,上面的代码生成了一个新的对象数组,每个对象只有两个道具
如果只需要每列值的数组,而不是两列都有值的对象,则可以:
var col2data = data.map(function(d) { return d.col2 }
var col3data = data.map(function(d) { return d.col3 }
console.log(col2) // outputs: ['aaa2', 'bbb2', 'ccc2']
你为什么不简单地映射每个属性呢?你能分享一些到目前为止你已经尝试过的代码吗?请记住,您可以在将数据结构馈送到d3之前对其进行操作,如果这样可以在绘制可视化时更易于处理的话