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

Question

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

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

这是我的代码：

d3.csv("cities.csv",(error, data) => {dataViz(data)});
function dataViz(incomingData) {
var maxPopulation = d3.max(incomingData, d => parseInt(d.population))
var yScale = d3.scaleLinear().domain([0,maxPopulation]).range([0,460]);
d3.select("svg").attr("style","height: 480px; width: 600px;");

d3.select("svg")
.selectAll("rect")
.data(incomingData)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", d => yScale(parseInt(d.population)))
.attr("x", (d,i) => i * 60)
.attr("y", d => 480 - yScale(parseInt(d.population)))
.style("fill", "#FE9922")
.style("stroke", "#9A8B7A")
.style("stroke-width", "1px")

注意，citys.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]

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

Output.publicPath

当在浏览器中引用publicPath时，它指定输出文件的公共URL地址。 对于嵌入或标记或引用诸如图像之类的资产的加载程序，当publicPath与文件在磁盘上的位置不同（由path指定）时，会将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)});