javascript - 将不透明度添加到 d3 colorScale

Question

有没有办法告诉 d3 在 colorScale 中使用不透明度？

假设我有类似的东西

const colorScale = scaleLinear()
    .range(colorRamp)
    .clamp(true);

colorRamp 是

const colorRamp = ["#ff70....", ] <- 30 colors in the array

有没有办法告诉 d3 colorScale 使用不透明度？

Answer 1

您可以使用 d3 比例指定 rgba 颜色以在填充中包含不透明度:

var color = d3.scaleLinear()
  .domain([1,10])
  .range(["rgba(0,0,0,0)","rgba(0,0,0,1)"]);

var color = d3.scaleLinear()
  .domain([1,10])
  .range(["rgba(0,0,0,0)","rgba(0,0,0,1)"]);
  
var svg = d3.select("body")
   .append("svg");

var background = svg.append("rect")
  .attr("width",500)
  .attr("height",200)
  .attr("fill","orange");
   
var rects = svg.selectAll(null)
  .data(d3.range(10))
  .enter()
  .append("circle")
  .attr("cy",50)
  .attr("cx",function(d) { return d*15+15; })
  .attr("fill", function(d) { return color(d); })
  .attr("r",6);

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

如果使用使用十六进制值的色带，您可以将其转换为使用 rgb 值并在之后添加不透明度/alpha 值，我在这里只是对每种颜色应用了相同的不透明度，但它会易于修改:

var ramp = ["#ff0000","#0000ff"];

ramp = ramp.map(function(color) {
  color = color.substring(1);
  color.split("");
  var i = 0;
  var r = parseInt(color[i++],16)*16+parseInt(color[i++],16);
  var g = parseInt(color[i++],16)*16+parseInt(color[i++],16);
  var b = parseInt(color[i++],16)*16+parseInt(color[i++],16);

  r = Math.round(r/2.56);
  g = Math.round(g/2.56);
  b = Math.round(b/2.56);
  
  opacity = 0.5; 
  return "rgba("+r+","+g+","+b+","+opacity+")";
})

console.log(ramp);

var color = d3.scaleLinear()
  .domain([1,10])
  .range(ramp);
  
var svg = d3.select("body")
   .append("svg");

var rects = svg.selectAll(null)
  .data(d3.range(10))
  .enter()
  .append("circle")
  .attr("cy",50)
  .attr("cx",function(d) { return d*15+15; })
  .attr("fill", function(d) { return color(d); })
  .attr("r",6);

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