Question

我正在尝试使用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);
});

Answer 1

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

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

如果它位于外面，您可以使用../在外面导航一个级别。例如，如果它位于名为data的单独文件夹中，则可以执行以下操作：

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

Answer 2

我找不到加载本地存储的csv文件的方法，但是当我浏览了这个方法接受的类型时，结果发现它只接受网址（没有路径）。

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

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

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

Answer 3

在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);
    });
  }

D3js v4在Angular 2中读取csv文件

3 个答案: