在D3 v5中使用d3.csv动态加载数据 [英] Dynamic loading data using d3.csv in D3 v5

问题描述

我正在尝试在d3.js中构建动态加载的条形图，该条形图将从后端部分加载数据.使用d3.csv()函数，是否有任何方法可以仅从数据中读取第一个n行数以进行初始绘制，然后根据我的JS逻辑加载后续数据?

I'm trying to build a dynamically loading bar chart in d3.js which will load data from back-end in parts. Using the d3.csv() function, is there any way to read only first n number of rows from a data for initial draw and then load subsequent data as per my JS logic?

tl; dr 我想在d3.csv()函数中有选择地访问我的数据.

tl;dr I want to selectively access my data inside the d3.csv() function.

我正在尝试为此运行以下代码:

I'm trying to run the below code for this :

var margin = {
            top: 20,
            bottom: 30,
            left: 40,
            right: 30
        },
        width = 600 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var loadData = function() {
        d3.csv("test_data.csv", function(data) {
            console.log(data.filter(function(d, i) {
                return i < 2;
            }));

            console.log(data.filter(function(d, i) {
                return i < 3;
            }))
        })
    }

    loadData();

但是，控制台出现错误:

However, I'm getting an error in the console:

未捕获(承诺)TypeError:data.filter不是函数(…)

这使我相信此数据不是数组.是这种情况还是我在这里面临其他问题?

Which leads me to believe that this data is not an array. Is this the case or am i facing some other issue here?

此外，如何访问此d3.csv函数内部的列(在csv文件中)? (例如，如果我的csv数据文件包含名为a和b的两列).

Also, how do I access columns (inside csv file) inside this d3.csv function? (if for example, my csv data file contains two columns named a and b).

推荐答案

首先，没有办法仅使用d3.csv加载/解析CSV的前n行，这恐怕是不可能的.不幸的是，您将不得不加载/解析所有文件，如果文件很大，这可能会很不方便，这意味着用户必须等待整个文件加载/解析后才能绘制图表.另外，值得一提的是，由于d3.csv会加载与后续过滤器无关的所有文件:仅使用所需的数据行，不要向浏览器添加更多不必要的任务，只需使用所需的行来绘制图表.

First, there is no way to load/parse just the first n rows of a CSV with d3.csv, I'm afraid that's not possible. Unfortunately you'll have to load/parse all the file, which may be inconvenient if the file is huge, meaning that the user will have to wait for the whole file to be loaded/parsed before the chart is painted. Also, it's worth mentioning that since d3.csv will load all the file the subsequent filter irrelevant: just use the rows of data you want, don't add even more unnecessary tasks to the browser, just use the rows you want for painting the chart.

回到您的主要问题:

您的数据是一个数组.这里的问题是，您正在使用d3.csv就像是XHR，D3 v4就是这种情况...但是，在D3 v5中，d3.csv是一个承诺.

Your data is an array. The problem here is just that you're using d3.csv as if it was a XHR, which was the case of D3 v4... However, in D3 v5, d3.csv is a promise.

因此，必须是:

d3.csv(url).then(callback);

看看下面的演示

var csv = URL.createObjectURL(new Blob([
  `foo,bar,baz
12,43,21
45,54,21
87,13,17
98,69,17`
]));

d3.csv(csv).then(function(data) {
  console.log(data.filter(function(d, i) {
    return i < 2;
  }));
})

<script src="https://d3js.org/d3.v5.min.js"></script>

关于第二个问题，d3.csv公开名为columns的数组属性中的列:

Regarding your second question, d3.csv exposes the columns in an array property named columns:

var csv = URL.createObjectURL(new Blob([
  `foo,bar,baz
12,43,21
45,54,21
87,13,17
98,69,17`
]));

d3.csv(csv).then(function(data) {
  console.log("columns are: " + data.columns)
})

<script src="https://d3js.org/d3.v5.min.js"></script>

这篇关于在D3 v5中使用d3.csv动态加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！