d3.js 中奇怪的“初始”值

Question

通过执行类似于this (d3.select(..).append("div")) 的代码，我得到具有此类样式属性的divs：

<div id="id6" 
  style="
    background-image: initial; 
    background-attachment: initial; 
    background-origin: initial; 
    background-clip: initial; 
    background-color: rgb(255, 255, 255); 
    background-position: initial initial; 
    background-repeat: initial initial; ">
5
</div>

问题：

1. a) initial 来自哪里？ b) 是否可以重新定义“默认值”？
2. d3 在带有unnecessary values 的属性中乱扔垃圾可以吗？
3. Chrome 说 background-position: initial initial; 和 background-repeat: initial initial; 是 Invalid property values。是d3的bug吗？我们该如何处理这个错误？

Answer 1

这与 D3 无关，而是与 CSS 的隐含性质有关。当您指定 CSS background property 时，您实际上是在简写指定多个属性。例如，

background: url(chess.png) gray 50% repeat fixed;

其实是简写

background-image: url(chess.png);
background-color: gray;
background-position: 50% 50%;
background-repeat: repeat;
background-attachment: fixed;

因此，当您设置样式“背景”时，您的浏览器会自动将此速记扩展为完整形式。这就是为什么你会看到所有这些额外的样式；它们代表computed values。