D3：条形图着色

Question

我在 D3 中有一个带有 x 和 y 值的条形图，我想根据 y 的值对条形图着色。如果 y 小于 6，那么它应该是一种颜色，否则我想要另一种颜色。

到目前为止，这是我的代码。这仅适用于一个值。

var data = [
                                            {x: 2, y:  4},
                                            {x: 5, y:  8},
                                            {x: 8, y: 10}
                                        ];

  bars.selectAll(".rect")
                                            .data(data)
                                            .enter().append("rect")
                                            .attr("class", "rect")
                                            .attr("x", function(d) { return x(d.x); })
                                            .attr("y", function(d) { return y(d.y); })
                                            .attr("height", function(d) { return h - y(d.y); })
                                            .attr("width", 15)
                                            .attr("fill", function(d){
                                                return colorPicker(d);
                                            });

                                        function colorPicker(v){
                                            if(v<=6) { return "#666666"}
                                            else if (v > 6){ return "#FF0033";}

                                        }

你知道我应该如何改变它吗？提前致谢！

Answer 1

根据该规则设置颜色的最简单方法是使用ternary operator：

.attr("fill", function(d){ return d.y > 6 ? "#FF0033" : "#666666"});

查看演示：

var w = 300, h = 100, padding = 20;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var data = [{name: "foo", y:10},
            {name: "bar", y:30},
            {name: "baz", y: 5}];

var xScale = d3.scaleBand()
  .range([0,w])
  .domain(data.map(function(d){ return d.name}))
  .paddingInner(0.2)
  .paddingOuter(0.2);

var yScale = d3.scaleLinear()
  .range([h - padding, 0])
  .domain([0, d3.max(data, function(d){ return d.y})]);

var xAxis = d3.axisBottom(xScale);

var bars = svg.selectAll(".bars")
  .data(data)
  .enter()
  .append("rect");

bars.attr("x", function(d){ return xScale(d.name)})
  .attr("width", xScale.bandwidth())
  .attr("y", function(d){ return yScale(d.y)})
  .attr("height", function(d){ return h - padding - yScale(d.y)})
  .attr("fill", function(d){ return d.y > 6 ? "#FF0033" : "#666666"});

var gX = svg.append("g")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>

但是，如果您想保留该功能，则必须使用d.y 作为参数调用colorPicker，而不是d：

colorPicker(d.y)

查看演示：

var w = 300, h = 100, padding = 20;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var data = [{name: "foo", y:10},
            {name: "bar", y:30},
            {name: "baz", y: 5}];

var xScale = d3.scaleBand()
  .range([0,w])
  .domain(data.map(function(d){ return d.name}))
  .paddingInner(0.2)
  .paddingOuter(0.2);

var yScale = d3.scaleLinear()
  .range([h - padding, 0])
  .domain([0, d3.max(data, function(d){ return d.y})]);

var xAxis = d3.axisBottom(xScale);

var bars = svg.selectAll(".bars")
  .data(data)
  .enter()
  .append("rect");

bars.attr("x", function(d){ return xScale(d.name)})
  .attr("width", xScale.bandwidth())
  .attr("y", function(d){ return yScale(d.y)})
  .attr("height", function(d){ return h - padding - yScale(d.y)})
  .attr("fill", function(d){return colorPicker(d.y);});

function colorPicker(v){
 if(v<6) { return "#666666"}
 else{ return "#FF0033";}}

var gX = svg.append("g")
  .attr("transform", "translate(0," + (h - padding) + ")")
  .call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>