Javascript D3js v4在Angular 2中读取csv文件

我正在尝试使用d3.csv方法从Angular 2应用程序中读取csv文件。 但它不会从物理路径（即我的目录结构）读取文件。 它尝试从中加载文件。这是404

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

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

---

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

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

如果它在外面的某个地方，您可以使用

。/

在外面导航一个级别。例如，如果它位于名为

data

的外部单独文件夹中，则可以执行以下操作：

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

---

我找不到加载本地存储的csv文件的方法，但是当我检查了这个方法接受的类型后，发现它只接受URL（没有路径）

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

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

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

---

在Angular中通过d3.csv（）方法加载数据不起作用

您需要：

将csv文件放在src/assets文件夹中

在组件内部，导入HttpClient并使用get（）方法将文件作为文本加载

使用d3.csvParse（）将文本转换为json，类似于d3.csv（）方法返回的内容

-

---

它与我的component.ts文件位于同一文件夹中。但它通过404访问它。您应该按如下方式使用：../app/components/csvgraph/data2.csv

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