显示的颜色组合了红色,绿色和蓝色。可以通过以下不同方式指定颜色-
d3颜色API提供了各种颜色的表示形式。您可以在API中执行转换和操作操作。让我们详细了解这些操作。
您可以使用以下脚本直接加载API。
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script>
</script>
让我们看一下D3中的基本颜色操作。
将颜色值转换为HSL-要将颜色值转换为HSL,请使用以下示例–
var convert = d3.hsl("green");
您可以如下所示将色相旋转45°。
convert.h + = 45;
同样,您也可以更改饱和度级别。要使颜色值褪色,可以如下所示更改不透明度值。
convert.opacity = 0.5;
以下是一些最重要的Color API方法。
让我们详细了解每种Color API方法。
它用于解析指定的CSS颜色并返回RGB或HSL颜色。如果未指定说明符,则返回null。
示例-让我们考虑以下示例。
<script>
var color = d3.color("green"); // asign color name directly
console.log(color);
</script>
我们将在屏幕上看到以下响应-
{r: 0, g: 128, b: 0, opacity: 1}
如果要使颜色褪色,可以更改不透明度值。范围为[0,1]。
示例-让我们考虑以下示例。
<script>
var color = d3.color("green");
console.log(color.opacity);
</script>
我们将在屏幕上看到以下响应-
1
它返回颜色的RGB值。让我们考虑以下示例。
<script>
var color = d3.color("green");
console.log(color.rgb());
</script>
我们将在屏幕上看到以下响应。
{r: 0, g: 128, b: 0, opacity: 1}
它根据CSS对象模型规范返回代表颜色的字符串。让我们考虑以下示例。
<script>
var color = d3.color("green");
console.log(color.toString());
</script>
我们将在屏幕上看到以下响应。
rgb(0, 128, 0)
如果颜色是可显示的,则返回true。如果RGB颜色值小于0或大于255,或者不透明度不在[0,1]范围内,则返回false。让我们考虑以下示例。
<script>
var color = d3.color("green");
console.log(color.displayable());
</script>
我们将在屏幕上看到以下响应。
true
此方法用于构造新的RGB颜色。让我们考虑以下示例。
<script>
console.log(d3.rgb("yellow"));
console.log(d3.rgb(200,100,0));
</script>
我们将在屏幕上看到以下响应。
{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}
它用于构造新的HSL颜色。值在返回的实例上显示为h,s和l属性。让我们考虑以下示例。
<script>
var hsl = d3.hsl("blue");
console.log(hsl.h + = 90);
console.log(hsl.opacity = 0.5);
</script>
我们将在屏幕上看到以下响应。
330
0.5
它构造了一种新的Lab颜色。通道值在返回的实例上显示为“ l”,“ a”和“ b”属性。
<script>
var lab = d3.lab("blue");
console.log(lab);
</script>
我们将在屏幕上看到以下响应。
{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}
构造新的HCL颜色。通道值在返回的实例上显示为h,c和l属性。让我们考虑以下示例。
<script>
var hcl = d3.hcl("blue");
console.log(hcl);
</script>
我们将在屏幕上看到以下响应。
{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}
构造新的Cubehelix颜色。值在返回的实例上显示为h,s和l属性。让我们考虑以下示例。
<script>
var hcl = d3.hcl("blue");
console.log(hcl);
</script>
我们将在屏幕上看到以下响应,
{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}
让我们创建一个新的网页– color.html来执行所有的颜色API方法。完整的代码清单在下面定义。
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<h3>D3 colors API</h3>
<script>
var color = d3.color("green");
console.log(color);
console.log(color.opacity);
console.log(color.rgb());
console.log(color.toString());
console.log(color.displayable());
console.log(d3.rgb("yellow"));
console.log(d3.rgb(200,100,0));
var hsl = d3.hsl("blue");
console.log(hsl.h + = 90);
console.log(hsl.opacity = 0.5);
var lab = d3.lab("blue");
console.log(lab);
var hcl = d3.hcl("blue");
console.log(hcl);
var cube = d3.cubehelix("blue");
console.log(cube);
</script>
现在,请求浏览器,我们将看到以下响应。
Made with ❤️ in Chengdu. Copyright reserved 2019-2023.
蜀ICP备20006366号-1