使用d3.js

Question

我想知道如何根据数据集中的值对svg矩形进行着色？如果我为每个数据条目绘制矩形，我怎么能根据数据值修改矩形的颜色？

到目前为止，我有：

         //Make an SVG Container
        var svgContainer = d3.select("body").selectAll("svg")
                                 .data(data)
                                 .enter().append("svg")
                                 .attr("width", 38)
                                 .attr("height", 25);

    //Draw the rectangle
     var rectangle = svgContainer.append("rect")
                    .attr("x", 5)
                     .attr("y", 5)
                     .attr("width", 38)
                     .attr("height", 25)
                      //want to color here based on data points, I want the data values to make my rectangles different shades of red
                    .style("fill", d3.rgb("red").darker(.data(data));

让我们说我的数据如下：

var data = [{One：420，Two：222，Three：332}，...];我只想要＆＃34; Two＆＃34;影响矩形颜色的值

Answer 1

这是不正确的：

    var svgContainer = d3.select("body").selectAll("svg")
                             .data(data)//INCORRECT
                             .enter().append("svg")
                             .attr("width", 38)
                             .attr("height", 25);

您正在制作与数据集数量一样多的svg。

应该是：

 var svgContainer = d3.select("body")
   .append("svg")
   .attr("width", 38)
   .attr("height", 25);

为矩形赋予颜色：

//create a color scale
         var c10 = d3.scale.category10();

现在制作与数据集一样多的矩形

     //Draw the rectangle
     var rectangle = svgContainer.selectAll("rect").data(data).enter().append("rect")
       .attr("x", 5)
       .attr("y", 5)
       .attr("width", 38)
       .attr("height", 25)
       //want to color here based on data points, I want the data values to make my rectangles different shades of red
       .style("fill", function(d){ return c10(d.One)});//use the color scale.

工作示例here

Answer 2

如果您想使用某些特定的颜色代码，那么下面的示例将有所帮助。

• d3色标d3.scale.category10()包含20种颜色
• 创建一个颜色池并在代码中使用
• 根据值
选择颜色

var rectangle = svgContainer.selectAll("rect") .data(data).enter() .append("rect") .attr("x", function(d,i){ return 40*i}) .attr("y", 5) .attr("width", 38) .attr("height", 25) .style("fill", function(d){ return d.Two <= 222 ? 'red' : 'green' });

Live Example