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")

请注意，city.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即可修复错误或检查下面的示例。

输出.publicPath

publicPath 指定在浏览器中引用时输出文件的公共 URL 地址。对于嵌入或标记或引用图像等资源的加载器，当文件与磁盘上的位置（由路径指定）不同时，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在其中添加文件。

索引.js

添加publicPath+ 文件名：

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