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>

将不透明度添加到d3 colorScale

1 个答案: