d3.js 使比例适合蓝色的 rgb() 范围

Question

正在尝试按比例填充条形图上的矩形颜色，

  var x1 = d3.scaleTime()
    .domain([parseTime('00:00'), d3.max(data, function(d) {
      return d.value
    })])
    .range([2, 256]);

像这样，

  .style('fill', function(d) {
          return "'rgb(0,0," + x1(d.value) + ")'"
        })

试图在比例尺上的蓝色范围内d.value

我现在变黑了，大概是默认颜色。

谢谢

Answer 1

你可以简化这个，d3 比例可以在颜色之间进行插值，所以你可以使用这样的代码：

 var x1 = d3.scaleLinear()
    .domain([0,100]])
    .range(["#000000","#0000ff"]);

您还可以使用：

 var x1 = d3.scaleLinear()
    .domain([0,100]])
    .range(["black","blue"]);

然后直接用比例给矩形上色：

.style('fill', function(d) { 
          return x1(d.value);
        })

此外，是的，黑色是默认颜色。为了在代码段中进行演示，我使用的是线性刻度而不是日期刻度：

var svg = d3.select("body")
  .append("svg")
  .attr("width",500)
  .attr("height",200);

var x1 = d3.scaleLinear()
  .domain([0,100])
  .range(["#000000","#0000ff"]);

var x2 = d3.scaleLinear()
  .domain([0,100])
  .range(["orange","steelblue"]);
        
var rects = svg.selectAll(null)
  .data(d3.range(100))
  .enter()
  .append("rect")
  .attr("fill",function(d) { return x1(d); })
  .attr("width",10)
  .attr("height",10)
  .attr("y",function(d) { return Math.floor(d/10) * 12; })
  .attr("x",function(d) { return d % 10 * 12; })

var rects = svg.selectAll("null")
  .data(d3.range(100))
  .enter()
  .append("rect")
  .attr("fill",function(d) { return x2(d); })
  .attr("width",10)
  .attr("height",10)
  .attr("y",function(d) { return Math.floor(d/10) * 12; })
  .attr("x",function(d) { return d % 10 * 12 + 130 ; })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

d3.js 使比例适合蓝色的 rgb() 范围

d3.js fit scale to rgb() range of blue

rgb

range

scale

d3.js