1

http://bl.ocks.org/bunkat/2605010に示されている例に基づいて、正方形のグリッドを作成しました。現在、csv ファイルのデータに基づいて、グリッド内の各セルを色分けしようとしています。たとえば、データを含む 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');    

});
4

2 に答える 2

0

項目の塗りつぶしの色を設定するために使用できる「塗りつぶし」属性があります。他の d3 関数と同様に、値、または値を返す関数のいずれかを渡すことができます。必要な色を決定し、その値を返す関数を使用したいようです。'#660066' または 'rgb(166,0,166)' のいずれかの文字列として (引用符で囲んで) 返さなければならないことに注意してください。必要に応じて rgba を使用することもできます。

この後は、正しい色を返す関数を記述するだけです。これについては、あなたが何を望んでいるのかわからないため、実際にはお手伝いできません。

また、これはd3js 塗りつぶしの色の複製である可能性があります。

于 2013-02-22T18:55:36.150 に答える