d3.csv(…).then is not a function
Question
d3.csv(...).then is not a function
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
I am using is using app.js , showing error on:
d3.csv(...).then is not a function
I am using the latest D3 version. I have tried using different format of:
<script src="http://d3js.org/d3.v3.min.js">
but did not work.
2 answers
solution1
0 2020-12-03 10:38:21
I have the same problem and I am wondering if it's because you and I used an obsolete version of d3.js that won't allow us to use.then I noticed that my code below worked with d3 v5 bot not previous version.
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);
So i have juste change the code as showing avoid.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);
solution2
-2 2020-05-20 16:22:38
after figuring out on the connection to csv file, here are the step by step solutions.
For D3 v5, -we are encouraged to use the command prompt cmd C:"enter the file path where html is stored" then enter http-server. Then go to google chrome and enter 127.0.0.1:8080 where the html will be opened.
-The easiest is to install http-server globally using node's package manager: npm install -g http-server at command prompt.
-Error of favicon may occurred and just download the icons and save at the same folder at the html files.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.