Question

我根据http://bl.ocks.org/bunkat/2605010中给出的示例构建了一个正方形网格。现在我正在尝试根据csv文件中的数据对网格中的每个单元格进行颜色编码。比方说，我有一个csv文件，数据为

cell，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');    

});

Answer 1

您可以使用'fill'属性设置项目的填充颜色。与其他d3函数一样，您可以传递一个值或一个返回值的函数。听起来你会想要使用一个函数来确定你想要的颜色，然后返回那个值。请注意，您必须将其作为字符串（因此用引号括起来）作为“＃660066”或“rgb（166,0,166）”返回。如果愿意，你也可以使用rgba。

在此之后，只需要编写你的函数来返回正确的颜色，我无法真正帮助你，因为我不知道你想要什么。

此外，这可能与d3js fill color重复。

Answer 2

我发现了自己的错误。我不得不使用d3.csv.parse（string）而不是d3.csv.parseRows（string [，accessor]）函数，因为我的csv文件包含列名。谢谢您的帮助。欣赏它。

d3.js基于来自csv文件的数据的颜色编码网格

2 个答案: