Как читать в CSV с d3?

Question

У меня есть небольшая проблема с пониманием документации для CSV Parse с D3. Я в настоящее время:

d3.parse("data.csv",function(data){ 
    salesData = data; 
}); 

Но я продолжаю получать ошибки:

Uncaught TypeError: d3.parse is not a function

Что это должно выглядеть? Я немного смущен, и единственными примерами, которые я мог найти, было что-то вроде this.

Я также пытался что-то вроде:

d3.dsv.parse("data.csv",function(data){ 
    salesData = data; 
}); 

и получил:

Uncaught TypeError: Cannot read property 'parse' of undefined

Почему это происходит? Любая помощь была бы очень восприимчивой, спасибо!

Answer 1

Существует какое-то недоразумение здесь: ты путаешь d3.csv, который является запрос, с d3.csvParse, который разбирает строку (а также смешивание D3 v3 с функциями D3 v4). Это различие:

d3.csv

d3.csv функция, которая принимает в качестве аргументов (url[[, row], callback]):

Returns a new request for the CSV file at the specified url with the default mime type text/csv. (emphasis mine)

Итак, как вы можете видеть, вы используете d3.csv, когда вы хотите, чтобы запросить данный CSV-файл с заданным URL-адресом.

Например, фрагмент кода ниже получает CSV в URL между кавычками, который выглядит, как это ...

name, parent 
Level 2: A, Top Level 
Top Level, null 
Son of A, Level 2: A 
Daughter of A, Level 2: A 
Level 2: B, Top Level 

... и записывает файл CSV разобраны, проверить его:

d3.csv("https://gist.githubusercontent.com/d3noob/fa0f16e271cb191ae85f/raw/bf896176236341f56a55b36c8fc40e32c73051ad/treedata.csv", function(data){ 
 
    console.log(data); 
 
});

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

d3.csvParse

вывода п, с другой стороны, d3.csvParse (или d3.csv.parse в D3 v3), которая принимает в качестве аргументов (string[, row]):

Parses the specified string, which must be in the delimiter-separated values format with the appropriate delimiter, returning an array of objects representing the parsed rows.

Таким образом, вы используете d3.csvParse, когда вы хотите, чтобы разобрать строку.

Вот демо, предположим, что у вас есть эта строка:

var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17"; 

Если вы хотите, чтобы разобрать его, вы будете использовать d3.csvParse, не d3.csv:

var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17"; 
 

 
var parsed = d3.csvParse(data); 
 

 
console.log(parsed);

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

Answer 2

Используйте d3.csv("data.csv", function(data){...}), чтобы получить CSV из url и parse, или используйте d3.csv.parse() для разбора строки в формате CSV.

Answer 3

Вы можете получить данные в формате CSV в d3, как следующее -

// get the data 
d3.csv("data.csv", function(error, data) { 
    if (error) throw error; 
     console.log(data); 
     //format data if required... 
     //draw chart 
} 

Answer 4

Вот код, который вы можете использовать для чтения csv-файла, используя d3.js

<script src="https://d3js.org/d3.v4.min.js"></script> 
<script> 
d3.csv("csv/cars.csv", function(data) { 
console.log(data[0]); 
}); 
</script> 

Обратите внимание, что имя файла csv - «cars.csv», и файл сохраняется в папке csv.

console.log(data[0]) 

поможет вам увидеть вывод данных в окне отладки браузера. Где вы также можете найти, есть ли какая-либо ошибка.