D3.js d3.hsl在Safari上失败

我创建了一个简单的HTML页面：

$（文档）.ready（函数（）{
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
//ctx.fillStyle=“灰色”；
ctx.fillStyle=d3.hsl（120,0.5,0.5）；
ctx.fillRect（0,0，canvas.width，canvas.height）；
});
html，正文{
宽度：100%；
身高：100%；
边际：0px；
}
看起来问题与字符串强制有关。基本上，让
d3.hsl
返回颜色字符串的正确方法（
“40bf40”
）是在hsl对象上调用
.toString（）
（请参阅）。所以在你的情况下，应该是

ctx.fillStyle = d3.hsl(120, 0.5, 0.5).toString()

这将解决Safari问题

它在Chrome中不使用
.toString（）
的原因是Chrome的JS引擎选择将其转换为字符串，就像JS将数字转换为字符串一样：
5+“2”/“52”
。它实际上在内部调用
（5）.toString（）+“2”
。Safari碰巧没有决定
.toString（）
它，这就是它不起作用的原因