d3.csv(...).then 不是 function

Question

d3.csv(...).then 不是 function

应用程序.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 不是 function

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

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

但没有工作。

Answer 1

我有同样的问题，我想知道这是否是因为你和我使用了一个不允许我们使用的过时版本的 d3.js。然后我注意到我下面的代码适用于 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);

所以我只是将代码更改为显示避免。然后：

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

Answer 2

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

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

- 最简单的方法是使用节点的 package 管理器全局安装 http-server：npm install -g http-server at command prompt。

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

d3.csv(...).then 不是 function

问题描述

2 个解决方案

解决方案1
0 2020-12-03 10:38:21

解决方案2
-2 2020-05-20 16:22:38

d3.csv(...).then 不是 function

问题描述

2 个解决方案

解决方案1 0 2020-12-03 10:38:21

解决方案2 -2 2020-05-20 16:22:38

解决方案1
0 2020-12-03 10:38:21

解决方案2
-2 2020-05-20 16:22:38