使用關聯數組作爲D3的數據

我有一個非常簡單的D3示例，首先將數據讀入關聯數組，然後將其顯示在條形圖中。使用關聯數組作爲D3的數據

雖然我似乎無法使用此方法顯示任何內容。相反，我必須在兩者之間插入一個任務：將數據讀入關聯數組，將數據複製到一個簡單數組中，然後使用簡單數組顯示條形圖。

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

上述不起作用。

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; });

上述確實;使用簡單的數組作爲中介。有沒有一種特殊的方法來遍歷一個關聯數組而不是一個標準數組？

來源

2012-03-06 Crummy

從包含的信息中可以看出，chart.data函數不接受JavaScript對象（又名「關聯數組」）。如果是這種情況，那麼你別無選擇，只能轉換爲數組。 – jbabey 2012-03-06 18:43:50

它們在JavaScript中不被稱爲關聯數組。我傾向於把這個術語掛起來，因爲通常那些天關聯數組的人會將它聲明爲一個數組，如PHP。 – 2015-12-19 00:06:41

您可以使用函數d3.values或d3.entries直接與關聯數組一起工作。您只需在設置屬性的函數中考慮它（例如function(d) { return d.value; }）。

來源

2012-03-06 18:39:39

這個解決方案並沒有完全奏效，但它指出了我的正確方向。通過用「.data（d3.values（genreAssociative））」替換「.data（genreAssociative）」，我能夠正確地顯示數據，但不幸的是這會丟失關鍵信息（所以我不能將關鍵字顯示爲文本，例）。 – Crummy 2012-03-06 19:42:46

你試過用'.data（d3.entries（genreAssociative））'嗎？ – 2012-03-06 19:51:34

是的，但是我可以訪問鍵而不是值。在我的條形圖中，我希望條長度的值和標籤的鍵。 – Crummy 2012-03-06 20:06:40

我發現爲了使條形圖生成工作良好，以下格式效果最好。它基於D3解析後的CSV格式。

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"}];

該格式允許相互關聯座標，大小，圖例和html鏈接。

一個工作示例可以在：http://bl.ocks.org/2164562。

來源

2012-03-27 02:08:30

使用關聯數組作爲D3的數據

回答

相關問題