Question

我想编写一个函数来将rgb hex颜色（例如：＃2eb82e）转换为该颜色的深色调。

d3.rgb(color).darker(1).toString();

上述行的问题是它不会返回rgb十六进制。它返回rgb(46, 184, 46)。

Answer 1

虽然在许多情况下您可以使用RGB值，您也可以使用十六进制值，但是对于那些需要十六进制值的时间，您可以修改d3.rgb以获得所需的输出。下面的代码将为d3.rgb添加一个新方法：toHex();，它将以十六进制格式导出颜色：

d3.rgb.prototype.toHex = function() {
  var r = Math.round(this.r).toString(16);
  var g = Math.round(this.g).toString(16);
  var b = Math.round(this.b).toString(16);
  if(this.r < 16) r = "0" + r;
  if(this.g < 16) g = "0" + g;
  if(this.b < 16) b = "0" + b;
  return "#"+r+g+b;
}

这是实际操作，第一个片段显示十六进制值，而第二个片段用于显示代码不会直观地扭曲任何输出值。

d3.rgb.prototype.toHex = function() {
  var r = Math.round(this.r).toString(16);
  var g = Math.round(this.g).toString(16);
  var b = Math.round(this.b).toString(16);
  if(this.r < 16) r = "0" + r;
  if(this.g < 16) g = "0" + g;
  if(this.b < 16) b = "0" + b;
  return "#"+r+g+b;
}

var color1 = "#101010";
var color2 = "#abcdef";

console.log("Color 1:")
console.log("plain color: ", color1);
console.log("darker 1: ", d3.rgb(color1).darker(1).toHex());
console.log("darker 2: ", d3.rgb(color1).darker(2).toHex());
console.log("---")
console.log("Color 2:")
console.log("plain color: ", color2);
console.log("darker 1: ", d3.rgb(color2).darker(1).toHex());
console.log("darker 2: ", d3.rgb(color2).darker(2).toHex());

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

d3.rgb.prototype.toHex = function() {
  var r = Math.round(this.r).toString(16);
  var g = Math.round(this.g).toString(16);
  var b = Math.round(this.b).toString(16);
  if(this.r < 16) r = "0" + r;
  if(this.g < 16) g = "0" + g;
  if(this.b < 16) b = "0" + b;
  return "#"+r+g+b;
}

var data = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]


var svg = d3.select("body").append("svg");

svg.selectAll().data(data)
  .enter()
  .append("rect")
  .attr("x",function(d,i) { return i * 30 + 15; })
  .attr("y",15)
  .attr("height",20)
  .attr("width",20)
  .attr("fill",function(d) { return d; });
  
svg.selectAll().data(data)
  .enter()
  .append("rect")
  .attr("x",function(d,i) { return i * 30 + 15; })
  .attr("y",45)
  .attr("height",20)
  .attr("width",20)
  .attr("fill",function(d) { return d3.rgb(d).darker(1).toHex(); });

svg.selectAll().data(data)
  .enter()
  .append("rect")
  .attr("x",function(d,i) { return i * 30 + 15; })
  .attr("y",75)
  .attr("height",20)
  .attr("width",20)
  .attr("fill",function(d) { return d3.rgb(d).darker(2).toHex(); });

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

Answer 2

D3 现在有一个功能： https://github.com/d3/d3-color#color_formatHex

d3.rgb(color).darker(1).formatHex()

d3.js - 将十六进制颜色转换为深色十六进制颜色

2 个答案: