Sử dụng mảng kết hợp làm dữ liệu cho D3

Question

Tôi có một ví dụ D3 rất đơn giản mà lần đầu tiên đọc dữ liệu vào một mảng kết hợp, sau đó hiển thị nó trong biểu đồ thanh.

Tôi dường như không thể hiển thị bất kỳ thứ gì để hiển thị bằng phương pháp này. Thay vào đó, tôi phải chèn một nhiệm vụ ở giữa: Đọc dữ liệu vào một mảng kết hợp, sao chép dữ liệu đó vào một mảng đơn giản, sau đó hiển thị biểu đồ thanh bằng cách sử dụng mảng đơn giản.

chart.selectAll("div") 
    .data(genreAssociative) 
    .enter().append("div") 
    .style("width", function(d) { return d * 10 + "px"; }) 
    .text(function(d) { return d; }); 

Ở trên không có tác dụng.

genreSimple = []; 
for (var genre in genreAssociative) genreSimple.push(genreAssociative[genre]);   
chart.selectAll("div") 
    .data(genreSimple) 
    .enter().append("div") 
    .style("width", function(d) { return d * 10 + "px"; }) 
    .text(function(d) { return d; }); 

Điều trên; sử dụng một mảng đơn giản làm trung gian. Có một cách đặc biệt để lặp qua một mảng kết hợp thay vì một mảng tiêu chuẩn?

Answer 1

Bạn có thể sử dụng các chức năng d3.values hoặc d3.entries để làm việc trực tiếp với các mảng liên kết. Bạn chỉ cần tính đến nó trong các hàm đặt thuộc tính (ví dụ: function(d) { return d.value; }).

Answer 2

Tôi thấy rằng để tạo biểu đồ thanh hoạt động tốt, định dạng sau hoạt động tốt nhất. Nó dựa trên định dạng CSV phân tích cú pháp sau D3.

var dataSet1 = [ 
    {xCoordinate: "Legend String 1", magnitude: 54, link: "http://www.if4it.com"}, 
    {xCoordinate: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"}, 
    {xCoordinate: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"}, 
    {xCoordinate: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"}, 
    {xCoordinate: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"}, 
    {xCoordinate: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"}, 
    {xCoordinate: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}]; 

Định dạng cho phép tương quan tọa độ, độ lớn, truyền thuyết và liên kết html với nhau.

Ví dụ làm việc có thể được tìm thấy tại: http://bl.ocks.org/2164562.