javascript - 使用 d3.js 根据数据值着色 svg 元素

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 数据 = [{一:420, 二:222, 三:332},...];我只希望“两个”值影响矩形的颜色

Answer 1

如果你想使用一些特定的颜色代码，那么下面的例子会有所帮助。

• 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