d3でカラー配列が無視されるのはなぜですか？

Question

私は、簡単なカラーチャートを導入d3の練習として構築しようとしています。私はすでに詰まっています。

私は次があります。

var colors = ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#2c7fb8","#253494"]; 

var barHeight = 20, 
    barWidth = 20, 
    width = (barWidth + 5) * colors.length; 


d3.select("body").selectAll("svg") 
    .data(colors) 
    .enter().append("rect") 
    .attr("class", "block") 
    .attr("width", barWidth) 
    .attr("height", barHeight - 1) 
    .text(function(d) { return d; }) 
    .attr("fill", function(d) { return d; }); 

https://jsfiddle.net/xryamdkf/1/

テキストが正常に動作します。私は16進コードを参照してください、しかし、高さと幅は間違いなく尊重されていない、私は色を設定するように見えることはできません。

これは色を設定するために働いています：.style("background", function(d) { return d; })しかし、私はそれがrectではなく、テキストの背景だと思います。

私はここで間違っていますか？ d3で20x20の長方形を色で塗りつぶすにはどうすればいいですか？

Answer 1

だから、いくつかのこと。あなたは、あなたが追加するものの空の選択となるものについて、data（）を呼び出す必要があります。

svg.selectAll("rect").data(colors) 
.enter().append("rect") 

rectにはテキストプロパティがありません。テキストを表示するsvgテキストノードがあり、それを別々に追加する必要があります。

このhttps://jsfiddle.net/xryamdkf/8/があなたに近づくことを願っています。