D3js v4在Angular 2中读取csv文件答案

【问题标题】：D3js v4 reading csv file in Angular 2D3js v4在Angular 2中读取csv文件
【发布时间】：2017-08-13 19:26:55
【问题描述】：

我正在尝试使用 d3.csv 方法从我的 Angular 2 应用程序中读取 csv 文件。但它不会从物理路径（即我的目录结构）读取文件。它尝试从http://localhost:4200/angular-src/src/app/components/csvgraph/data2.csv 加载文件。这给出了 404。

我正在使用以下代码来读取文件：

d3.csv('/angular-src/src/app/components/csvgraph/data2.csv', function(err,data){
  console.log(data);
});

【问题讨论】：

你应该使用它如下：../app/components/csvgraph/data2.csv

标签： javascript csv angular d3.js

【解决方案1】：

在 Angular 中通过 d3.csv() 方法加载数据不起作用。

你需要：

将 csv 文件放在 src/assets 文件夹中
在您的组件中，导入 HttpClient 并使用 get() 方法将文件加载为文本
使用 d3.csvParse() 将文本转换为 json，类似于 d3.csv() 方法返回的内容

  constructor(private http: HttpClient) {}
  ngOnInit() {
    this.http.get('assets/flowers.csv', { responseType: 'text' }).subscribe(data => {
       var objs = d3.csvParse(data);
       this.createChart(objs);
    });
  }

【讨论】：

【解决方案2】：

我找不到加载本地存储的 csv 文件的方法，但是当我查看此方法接受的类型时，结果发现它只接受 url（无路径）。

作为一种临时解决方案，您可以将文件上传到云中的某个位置，并包含一个链接。

这是一个例子，你可以试试

d3.csv('https://gist.githubusercontent.com/bigsnarfdude/515849391ad37fe593997fe0db98afaa/raw/f663366d17b7d05de61a145bbce7b2b961b3b07f/weather.csv', function(err,data){
  console.log(data);
})

【讨论】：

【解决方案3】：

如果您的数据文件与包含此代码的文件位于同一目录中。只需使用如下文件名：

d3.csv('data2.csv', function(err,data){
  console.log(data);
});

如果它在外面的某个地方，您可以使用../ 在外面导航一层。例如，如果它位于外部名为data 的单独文件夹中，那么您可以这样做：

d3.csv('../data/data2.csv', function(err,data){
  console.log(data);
});

【讨论】：

它与我的 component.ts 文件位于同一文件夹中。但它通过localhost:4200/data2.csv 访问它，它给出了 404。