javascript - 根据值用渐变颜色填充条

Question

我正在绘制条形图。目前每个条形都有相同的颜色。

我想要一系列的颜色。例如主色是#00008b，我会有不同的浅色。

颜色将取决于我的 y

的值

代码

 svg.append("g")
.attr("class", "bar")
.selectAll("rect")
.data(fullData)
.enter()
.append("rect")
.attr("x", function(d, i) {
    return xScale(d.year);
})
.attr("y", function(d) {
    return yScale(d.sale);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
    return height - margins.bottom - yScale(d.sale);
})
.attr("fill", function(d){
    //code here
})

想法是得到如下代码:

.attr("fill", function(d){
    mainColor.lighter(d.value);
})

最小的值会得到最亮的蓝色，最大值会得到最暗的条

Answer 1

首先，定义色标:

var mycolor = d3.scaleLinear()
    .domain([10, 100])
    .range(["lightblue", "steelblue"]);

并根据值使用:

.attr("fill", function(d){ return color(d)});

这是一个演示:

var data = [40, 80, 50, 160, 230, 260, 10, 300, 140, 210];

var body = d3.select("body");
  
var divs = body.selectAll("div")
  .data(data)
  .enter().append("div");
	
var color = d3.scaleLinear()
  .domain([0, 300])
  .range(["powderblue", "midnightblue"]);
	
divs.style("width", function(d) { return d + "px"; })
  .attr("class", "divchart")
  .style("background-color", function(d){ return color(d)})
  .text(function(d) { return d; });

.divchart {
  font: 10px sans-serif;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

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