d3.js基於csv文件數據的顏色編碼網格

我基於http://bl.ocks.org/bunkat/2605010中給出的示例構建了一個正方形網格。現在我試圖根據csv文件中的數據對網格中的每個單元格進行顏色編碼。說，例如，我有數據csv文件作爲d3.js基於csv文件數據的顏色編碼網格

細胞中，col1

1,2-

2,3-

3,2

4,1

單元格根據col1中的數據進行着色。像藍色的電池1，綠色的電池2，藍色的電池3，紅色的電池4。

我一直在嘗試這樣的事情，但它不起作用。請幫忙？

d3.text("frame.csv", function(datasetText) { 

var parsedCSV = d3.csv.parseRows(datasetText);  
    var col = row.selectAll(".cell")  
       .data(function (d) { return d; })  
       .enter().append("svg:rect")  
       .attr("class", "cell")  
       .attr("x", function(d) { return d.x; })  
       .attr("y", function(d) { return d.y; })  
       .attr("width", function(d) { return d.width; })  
       .attr("height", function(d) { return d.height; })  
     .style("fill", function(d) { return color(parsedCSV[d].col1); })  
     .style("fill", '#FFF')  
       .style("stroke", '#555');  

});

來源

2013-02-22 user2100513

首先，您似乎要一次接一次地設置填充樣式兩次，第二次將填充顏色設置爲純白色。 – 2013-02-23 01:07:18

謝謝你尼克的回覆。你是對的。我刪除了第二個填充設置爲白色。但我仍然不明白。感謝你的幫助。 – user2100513 2013-02-23 02:30:47

您是否嘗試過在某些日誌中添加顏色函數返回的值？ – 2013-02-23 02:48:57

有一個'填充'屬性，您可以用來設置項目的填充顏色。像其他的d3函數一樣，您可以傳遞一個值或一個返回值的函數。這聽起來像你會想要使用一個函數，它將決定你想要什麼顏色，然後返回該值。請注意，您必須將其作爲字符串（如此用引號括起）作爲'＃660066'或'rgb（166,0,166）'返回。如果你願意，你也可以使用rgba。

之後，它只是寫你的函數返回正確的顏色，我不能真正幫助你，因爲我不知道你想要什麼。

此外，這可能是d3js fill color的重複。

來源

2013-02-22 18:55:36

我發現我的錯誤。我必須使用d3.csv.parse（string）而不是d3.csv.parseRows（string [，accessor]）函數，因爲我的csv文件包含列名。謝謝您的幫助。欣賞它。

來源

2013-02-24 02:09:58 user2100513

d3.js基於csv文件數據的顏色編碼網格

回答

相關問題