d3.csv(...).then 不是函数答案

【问题标题】：d3.csv(...).then is not a functiond3.csv(...).then 不是函数
【发布时间】：2020-09-06 20:44:13
【问题描述】：

d3.csv(...).then 不是函数

app.js

// Select body, append SVG area to it, and set the dimensions
var svg = d3.select("body")
  .append("svg")
  .attr("height", svgHeight)
  .attr("width", svgWidth);

// Append a group to the SVG area and shift ('translate') it to the right and to the bottom
var chartGroup = svg.append("g")
 .attr("transform", `translate(${chartMargin.left}, ${chartMargin.top})`);


// Load data from hours-of-tv-watched.csv
d3.csv("hours-of-tv-watched.csv").then(function(tvData) {

console.log(tvData);

// Cast the hours value to a number for each piece of tvData
tvData.forEach(function(d) {
d.hours = +d.hours;
});

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <title>Hours of TV Watched Each Month</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <script src="app.js"></script>
</body>
</html>

CSV：

name,hours
Han,33
Christian,12
Lisa,41
Jacob,16
Nick,59
Ahmed,38
Peleke,21
Matt,25

我正在使用app.js，显示错误：

d3.csv(...).then 不是函数

我使用的是最新的 D3 版本。我尝试过使用不同的格式：

<script src="http://d3js.org/d3.v3.min.js">

但没用。

【问题讨论】：

嗨，Mehdi，我已尝试搜索其他答案，但您向我展示的答案无效。

标签： javascript html csv d3.js

【解决方案1】：

在弄清楚与 csv 文件的连接后，这里是分步解决方案。

对于 D3 v5， - 鼓励我们使用命令提示符 cmd C:“输入存储 html 的文件路径”，然后输入 http-server。然后去谷歌浏览器输入 127.0.0.1:8080 会打开html。

-最简单的方法是使用 node 的包管理器全局安装 http-server： npm install -g http-server 在命令提示符下。

-可能会出现favicon错误，只需下载图标并保存在html文件的同一文件夹中。

【讨论】：

【解决方案2】：

我也有同样的问题我想知道是不是因为你和我使用了一个过时的 d3.js 版本，它不允许我们使用 .then 我注意到我下面的代码适用于 d3 v5 bot 而不是以前的版本。

d3.csv("data.csv", function(d) {
    d.log_tot_moy = (d.log_tot_moy == "") ? 0 : +d.log_tot_moy;
    return d;

})
.then(function(data1) {
    cities = data1;
    cities.sort(function(a, b) {
        return (a.log_tot_moy > b.log_tot_moy) ? -1 : ((b.log_tot_moy > a.log_tot_moy) ? 1 : 0);

    });


})
citiesOverlay.addTo(map);

所以我只是将代码更改为显示避免 .then ：

d3.csv("data.csv", function(data) {
cities = data;
cities.sort(function(a, b) {
    var p = parseInt(a.log_tot_moy);
    var q = parseInt(b.log_tot_moy);
    return (p > q) ? -1 : ((q > p) ? 1 : 0);
});
citiesOverlay.addTo(map);

【讨论】：