在Javascript + d3中提取每隔一个柱形图和折线图

h9vpoimq  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(120)

我对Javascript和D3非常陌生。所以也许是一个非常简单的问题。
我有一个csv文件需要导入。列如下。日期、值A(分数)、值A(排名)、值B(分数)、值B(排名)......值Z(排名)。
我需要使用D3绘制日期与值A(得分)和值B(得分)的关系图。
我目前正在使用下面的代码。

const dataset = d3.csv("boardgame_ratings.csv")

        dataset1.then(function(data){
        const slices = data.columns.slice(1).map(function(id){
            return {
            id: id,
            values: data.map(function(d){
                return {
                date: timeConv(d.date),
                measurement: +d[id]
                };
            })
            };
        })

我省略了实际的图形,因为我没有问题。
我遇到的问题是我只需要绘制"得分"部分,而不是"排名"部分。我编写的代码绘制了每一列。
因为JS是异步的,所以我遇到了一些麻烦。我该如何实现下面的代码呢?
1.从CSV文件中仅提取"评分"和日期列。
1.将新数据声明为数据集。
1.执行代码。

anauzrmj

anauzrmj1#

我认为问题出在绘制图表的代码上(正如你提到的,“我编写的代码每列都绘制图表”)。这并不理想,因为你需要控制你绘制的内容,所以一个快速的解决办法是创建一个键数组,告诉你要使用哪些列。另外,过滤掉列是不必要的,因为当你获取CSV时,你会得到整个文件:如果你不需要某些栏目,可以忽略它们。因此,过滤掉它们只会增加浏览器的负担。
尽管如此,d3.csv接受行函数,因此删除一些列是微不足道的:

const dataset = d3.csv("boardgame_ratings.csv", d => ({foo: d.foo, bar: d.bar}));

这里我只保留了foobar列,忽略了所有其他列。

相关问题