D3:条形图着色

D3: Bar chart coloring

本文关键字：条形图 D3      更新时间：2023-09-26

我在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";}
                                        }

你知道我该怎么改变吗?提前感谢!

根据该规则设置颜色的最简单方法是使用三元操作符:

.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>

相关文章：