webpack不允许d3.csv（）加载数据？

Question

我已按照此处的建议方式配置了webpack：https://code.likeagirl.io/how-to-set-up-d3-js-with-webpack-and-babel-7bd3f5e20df7

当我想通过d3.csv加载数据时，没有结果。

这是我的代码：

{"ts":"6533707677506207745","t":2,"h":"-7325657776689654694", ...}

Nota bene，cities.csv文件与我的index.js在同一文件夹中，其中包含上述代码。

Answer 1

未定义

  

当我想通过d3.csv加载数据时，没有结果。

这意味着D3无法找到该文件，因此它会返回未定义的数据 因为正在输出目录中搜索：dist/cities.csv

您应该在浏览器控制台中收到如下错误：

GET XHR
http://localhost:9000/cities.csv
[HTTP/1.1 404 Not Found 2ms]

只需在cities.csv内添加dist即可修复错误或查看下面的示例。

Output.publicPath

  

publicPath指定在浏览器中引用时输出文件的公共URL地址。对于嵌入或标记或引用图像等资源的加载器，当publicPath与磁盘上的位置（由路径指定）不同时，将使用publicPath作为文件的href或url（）

Webpack.config

在配置文件中添加公共路径：

   module.exports = { 
      entry: './src/index.js', 
      output: {
        path: path.resolve('dist'),
        publicPath: "/assets/",
        filename: 'index_bundle.js' 
      }
      ...

创建dist/assets目录并在其中添加.csv文件。

Index.js

添加publicPath +文件名：

d3.csv("/assets/cities.csv",(error, data) => {dataViz(data)});