在 d3.js 中加载 JSON 以绘制散点图

Question

I am just trying my hand on d3.js and I am already in trouble. As per my knowledge, the second parameter passed in d3.json() can be used to process data from json.

My code is:

 d3.json(base_url() + "data/data.json", clean_data)
   .then(function (dataset) {
      global_dataset = dataset;
      console.log(dataset.age);
  })
 .catch(() => console.log("could not load a file"));

function clean_data(d) {
 console.log("i am here");
 let balance = d.balance;
 balance = balance.splice(1);
 return { age: +d.age, balance: +balance };
}

In my code console.log(dataset) is giving me original JSON data rather than processed object returned by clean_data() function.

My JSON data look like this :

JSON URL

In my HTML for this, I have included CDN of d3.js:

   <script src="https://d3js.org/d3.v5.min.js"></script>

I am trying to make scatterplot from this JSON using d3.js and promise.

Answer 1

You seems to have miss-understood how to use d3.json() , d3.json() in v5 takes the first parameter URL and the second parameter is option object (since d3.json is a wrapper for fetch API ), which is the URL for your JSON server, then it will return a Promise fulfilled upon success and rejected upon failure, so you have to iterate over your JSON response and add it to an Array or maybe use the well known D3.js - enter(), update() and exit() pattern , here is an example of what you might do to get your data:

 const data = []; d3.json('https://next.json-generator.com/api/json/get/V1OqfcoK_').then(function (dataset) { dataset.forEach((d, i) => { data.push({age: +d.age, balance: +Number(d.balance.replace(/[^0-9.-]+/g, ""))}); }); // once done iterating over dataset we can use it console.log(data); }).catch(() => console.log("could not load a file"));

 <:-- Load d3.js --> <script src="https.//d3js.org/d3.v5.min.js"></script>