Question

我正在画一个条形图。目前每个酒吧都有相同的颜色。

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

颜色取决于我y

的值

CODE

 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 colors = d3.scale.linear()
.domain([0, 200]) // you min/max y values
.range(['#000000','#ffffff']) // you min/max color values

然后这样称呼它：

.style('fill', function(d,i) {
    return colors(yScale(d.sale));
})

请参阅小提琴：http://jsfiddle.net/6z7bgxam/

Answer 2

First, define your color scale:

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

And use it according to the value:

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

Here is a demo:

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>

根据值填充渐变颜色条

2 个答案: