D3.JS Дерево Карта Загрузка в CSV - PullRequest
Новая
       32

D3.JS Дерево Карта Загрузка в CSV

0 голосов
/ 24 октября 2019 
<!DOCTYPE html>
<meta charset="utf-8">

<!-- load D3js -->
<script src="https://d3js.org/d3.v3.js"></script>

<!-- load D3plus after D3js -->
<script src="https://d3plus.org/js/d3plus.js"></script>

<!-- create container element for visualization -->
<div id="viz"></div>

<script>
  // sample data array
  d3.csv("DataVis.csv", function(data){
    console.log(data);
});
  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#viz")  // container DIV to hold the visualization
    .data(data)  // data to use with the visualization
    .type("tree_map")   // visualization type
    .id("Name")         // key for which our data is unique on
    .size("Amount Spent")      // sizing of blocks
    .draw()             // finally, draw the visualization!
</script>

Я получаю сообщение об ошибке "данные не определены" Я прикрепил свой CSV-файл здесь

Я продолжаю получать сообщения об ошибках в этой части, и я не уверен, что делать. Буду рад любому отзыву

Ответы [ 2 ]

0 голосов
/ 28 октября 2019

Есть два основных вопроса с вашим кодом.

  1. Часть кода визуализации должна находиться в функциональном блоке с данными (как указано в другом ответе)
  2. Ваши данные не являются истинными числами, потому что у вас естьчисла для суммы, потраченной в формате "$ 8 200 000,00". Javascript не читает это как число, а скорее как строку. По этой причине вы получаете сообщение об ошибке [D3 plus], данные отсутствуют. Чтобы исправить это, вам необходимо выполнить «преобразование типа», то есть преобразовать строку в тип числа.

Чтобы исправить это, вам необходим цикл forEach, который выполняет преобразование типа, например: 

data.forEach(function(d) {
   d["Amount Spent"] = +d["Amount Spent"].trim().replace(/\$/g, "").replace(/\,/g, "");
});

где,

функция .trim() удаляет все лишние пробелы до / после текста

.replace(/\$/g, "") удаляет любые знаки $

.replace(/\,/g, ""); удаляет все запятые

Вот блок с рабочим примером с ограниченным количеством данных: https://bl.ocks.org/akulmehta/4ae4564a66c0869c1d9065cd8e73a586/

0 голосов
/ 24 октября 2019

Загрузка данных будет завершена только в рамках функции обратного вызова. поэтому вы должны пытаться что-то делать с этими данными только после их загрузки. 

d3.csv("DataVis.csv", function(data){
  console.log(data);
  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#viz")  // container DIV to hold the visualization
    .data(data)  // data to use with the visualization
    .type("tree_map")   // visualization type
    .id("Name")         // key for which our data is unique on
    .size("Amount Spent")      // sizing of blocks
    .draw()             // finally, draw the visualization!
});
...