Загрузите JSON в d3. js, чтобы нарисовать диаграмму рассеяния

Question

Я просто пробую свои силы на d3. js и у меня уже проблемы. Насколько мне известно, второй параметр, переданный в d3. json (), можно использовать для обработки данных из json.

Мой код:

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

В моем коде console.log (набор данных) предоставляет мне исходные JSON данные, а не обработанный объект, возвращаемый функцией clean_data ().

Мои JSON данные выглядят так :

JSON URL

В моем HTML для этого я включил CDN d3. js:

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

Я пытаюсь построить диаграмму рассеяния из этого JSON, используя d3. js и обещание.

Answer 1

Кажется, вы неправильно поняли, как использовать d3. json () , d3.json() в v5 принимает URL-адрес первого параметра, а второй параметр - объект option (поскольку d3. json является оболочкой для fetch API ), который является URL-адресом вашего JSON сервера, тогда он вернет Promise , выполненное в случае успеха и отклоненное в случае успеха. сбой, поэтому вам нужно перебрать свой ответ JSON и добавить его в массив или, возможно, использовать хорошо известный D3. js - шаблон enter (), update () и exit () , вот пример того, что вы можете сделать, чтобы получить свои данные:

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>