Как загрузить файл csv для использования с D3

Я пытаюсь понять, как использовать файл csv в моих проектах D3. В этом случае я пытаюсь создать новый div для каждого года в моих данных. Мой код выглядит следующим образомКак загрузить файл csv для использования с D3

d3.csv.parse(d3.select("ballettest.csv").text(), function(d){ 

    d3.select("body").append("div") 
    .text(d.year); 

});

и мои данные выглядит следующим образом

year,production,company 
1952,A Mirror for Witches (1952),Sadler's Wells Ballet 
1937,A Wedding Bouquet (1937),The Vic-Wells Ballet 
1946,Adam Zero (1946),Sadler's Wells Ballet 
1958,Agon (1958),The Royal Ballet

Я задал этот вопрос раньше, но, к сожалению, попал в тупик: How to load tsv file to use with D3 Сейчас я получаю сообщение об ошибке «d не определены «. Как я могу это исправить?

Я просмотрел документацию D3, но по-прежнему получаю множество концепций. Я использовал tsv, но теперь я использую csv, поскольку я читаю, что есть проблемы с использованием plunker.

Любая дополнительная помощь будет высоко ценится, благодаря

источник

2015-03-25 user3821345

Вы можете сделать это менее непонятным образом, как это

<html> 
<head> 
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script type="text/javascript"> 
d3.csv("data.csv", function(error, data) { 
    data.forEach(function(d) { 
     d3.select("body").append("div").text(d.year); 
    }); 
}); 
</script> 
</head> 
</html>

данные.csv

year,production,company 
1952,A Mirror for Witches (1952),Sadler's Wells Ballet 
1937,A Wedding Bouquet (1937),The Vic-Wells Ballet 
1946,Adam Zero (1946),Sadler's Wells Ballet 
1958,Agon (1958),The Royal Ballet

источник

2015-03-25 16:16:42 vzamanillo

Вот что я искал, спасибо большое – user3821345

Добро пожаловать :) – vzamanillo

Хотя этот вариант использует меньше кода, чем мой для этого примера, он включает в себя больше операций DOM, что означает, что это будет медленнее в более сложных примерах. Связывание данных с выборами обычно лучше. См. Http://alignedleft.com/tutorials/d3/binding-data – richardwestenra

Попробуйте изменить сценарий, чтобы что-то вроде этого:

d3.csv("ballettest.csv", function(data){ 

    d3.select("body").selectAll("div") 
    .data(data) 
    .enter() 
    .append("div") 
    .text(function(d){ 
     return d.year; 
    }); 

});

источник

2015-03-25 15:57:34 richardwestenra

Это отлично работает, спасибо огромное – user3821345

Как загрузить файл csv для использования с D3

ответ

Смежные вопросы