Nhúng csv vào HTML để sử dụng với D3.js

Question

Trong D3.js, người ta thường tải dữ liệu từ tệp csv bên ngoài. Điều này rất hiệu quả đối với dữ liệu lớn và tránh thay đổi mã khi dữ liệu thay đổi.

Tuy nhiên, có hai tình huống (chỉ sử dụng dữ liệu csv nhỏ), nơi tôi muốn nhúng csv trực tiếp trong một trang HTML:

• Một trang có thể được nạp tại địa phương (tức là từ file: ///), mà không cần chạy một máy chủ HTTP cục bộ.
• Ví dụ về jsfiddle nhỏ giải thích câu hỏi D3.js để sử dụng trên stackoverflow.

Answer 1

Đây là giải pháp tôi đã đưa ra, sử dụng ví dụ từ D3.js API.

Nhúng dữ liệu csv:

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

hidding các dữ liệu thô trên trang:

#csvdata { 
    display: none; 
} 

Phân tích nó:

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

Tùy chọn, hiển thị kết quả:

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

Nếu nghĩ rằng điều này là thiếu sót, hoặc nếu bạn có một giải pháp thanh lịch hơn, tôi sẽ sẵn sàng chấp nhận câu trả lời của bạn!

CHỈNH SỬA: xem nó hoạt động trong this fiddle