D3 - Reading from .json and attempting to plot points - nothing displayed
Question
I've been following various tutorials from over the past few years (seems D3 has gone through a bunch of changes) but cannot seem to nail this basic task down. Loading data in from MonthySales.json and trying to plot the points. Blank screen, but no errors at all in console.
var h=100;
var w=400;
d3.json("MonthlySales.json", function(error, data) {
var dataset = data
var line = d3.line()
.x(function (d) {return ((d.month-20130001)/3.25)})
.y(function (d) {return h-d.sales; })
var svg = d3.select("body").append("svg").attr("width",w).attr("height",h)
svg.append("path").datum(dataset).attr("class","line").attr("d",line)
.attr("fill","none").attr("stroke","purple").attr("stroke-width","2")
});
JSON is set up in the form:
[
{"month":20130101, "sales":38},
{"month":20130201, "sales":35},
{"month":20130301, "sales":24},
{"month":20130401, "sales":21},
{"month":20130501, "sales":34},
{"month":20130601, "sales":45},
{"month":20130701, "sales":67},
{"month":20130801, "sales":1},
{"month":20130901, "sales":54},
{"month":20131001, "sales":10},
{"month":20131101, "sales":20},
{"month":20131201, "sales":30}
]
1 answers
solution1
1 ACCPTED 2021-01-27 03:51:14
On V5/v6 d3.json() is a wrapper of JS fetch , and fetch is a promise.
function responseJson(response) {
if (!response.ok) throw new Error(response.status + " " + response.statusText);
if (response.status === 204 || response.status === 205) return;
return response.json();
}
export default function(input, init) {
return fetch(input, init).then(responseJson);
}
input argument remains a the route to the JSON, but init is the options object of fetch()
{
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
}
responseJson() process the response of the promise and pass a JSON Object to the next then()
Now the correct way to do this is
const h = 100; const w = 400; d3.json("https://gist.githubusercontent.com/jkutianski/57d1d392068b6c5a9216466f9e5d6459/raw/f93d5c296c3b6b69c920c573e010a29cc4339f2a/MonthlySales.json").then(dataset => { const line = d3.line().x(d => (d.month - 20130001) / 3.25).y(d => h - d.sales); const svg = d3.select("body").append("svg").attr("width", w).attr("height", h); svg.append("path").datum(dataset).attr("class", "line").attr("d", line).attr("fill", "none").attr("stroke", "purple").attr("stroke-width", "2"); }).catch(console.error);
<script src="https://d3js.org/d3.v6.min.js"></script> <!DOCTYPE html> <html> <meta charset="utf-8"> <body> </body> </html>
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.