2013-04-26 17 views
11

D3.js'de, genellikle harici bir csv dosyasından veri yükler. Bu, büyük veriler için çok verimlidir ve veri değiştiğinde kodu değiştirmekten kaçınır.Ds.js ile kullanım için HTML'ye csv katıştırma

  • lokal yüklenebilen bir sayfayı (yani dosyasından:

    Ancak, ben bir HTML sayfası doğrudan csv gömmek istiyorum (sadece küçük csv verileri kullanarak) iki durum vardır ///), yerel bir HTTP sunucusunu çalıştırmaya gerek olmadan.

  • Yığın akışında kullanılmak üzere D3.js sorusunu açıklayan küçük bir jsfiddle örneği.

cevap

19

Bu, D3.js API örneğinden yararlanarak bulduğum çözümdür. csv veri katıştırma

:

<pre id="csvdata"> 
    Year,Make,Model,Length 
    1997,Ford,E350,2.34 
    2000,Mercury,Cougar,2.38 
</pre> 

Hidding sayfasındaki ham veriler:

#csvdata { 
    display: none; 
} 

bunu Ayrıştırma:

:

var raw = d3.select("#csvdata").text(); 
var parsed = d3.csv.parse(raw); 

İsteğe bağlı olarak, sonuç göster

d3.select("#parsed").text(JSON.stringify(parsed)); 
// Assuming <div id="parsed"></div> somewhere on the page 

Bunun hatalı olduğunu düşünüyorsanız ya da daha zarif bir çözümünüz varsa, cevabınızı memnuniyetle kabul ediyorum!

EDIT: this fiddle