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文件数据的颜色编码网格

回答

相关问题