Javascript D3过渡框阴影中的CSS值

我想做一个d3转换，基于css中的样式。然而，我不能做它的方块阴影。我是否犯了错误或不支持

var first = d3.select('.first'),
second = d3.select('body').append('div').attr('class', 'second').style('display', 'none'),
color = second.style('box-shadow');
first.transition().duration(3000).style('box-shadow', color);

.first {
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 4px 1px gray inset;
}
.second {
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 4px 1px blue inset;
}

以下是fiddle中的示例：

下面是一个使用背景色的工作示例，我的代码基于此示例：

---

如果您只想对阴影颜色进行转换，可以使用它继承了color css属性这一事实

将css更改为：

.first {
    width: 100px;
    height: 100px;
    box-shadow: 0px 0px 4px 1px inset;
    color: gray;
}
.second {
    width: 100px;
    height: 100px;
    box-shadow: 0px 0px 4px 1px inset;
    color: blue;
}

并设置颜色动画，而不是框阴影：

---

请参见更新的

如果您只想对阴影颜色进行转换，可以使用它继承了颜色css属性这一事实

将css更改为：

.first {
    width: 100px;
    height: 100px;
    box-shadow: 0px 0px 4px 1px inset;
    color: gray;
}
.second {
    width: 100px;
    height: 100px;
    box-shadow: 0px 0px 4px 1px inset;
    color: blue;
}

并设置颜色动画，而不是框阴影：

---

请参见更新的

问题在于，当您使用D3检索长方体阴影样式时，会得到其规范形式。在本例中，这是rgb0，0250px 0px 4px 1px插图，与您在CSS中指定它的方式大不相同。现在D3不知道如何在字符串之间插值

0px 0px 4px 1px gray inset

及

什么也没发生。如果以与第一个样式相同的格式显式指定新样式，则可以使用该样式，请参见

然而，在这种情况下，这并不能真正为您提供所需的转换。解决这一问题的一种方法是使用不同的方式声明样式（参见Paulito的答案），但这可能不可能，这取决于您使用的其他样式。解决这个问题的第二种方法是使用。特别是，在其他颜色保持不变的情况下，只需在此处插入颜色。在代码中，这看起来像这样

first.transition().duration(3000)
  .styleTween("box-shadow", function() {
    var i = d3.interpolate("gray", "blue");
    return function(t) {
        return "0px 0px 4px 1px " + i(t) + " inset";
    };
  });

---

完整的演示。

问题是，当您使用D3检索框阴影样式时，您得到的是它的规范形式。在本例中，这是rgb0，0250px 0px 4px 1px插图，与您在CSS中指定它的方式大不相同。现在D3不知道如何在字符串之间插值

0px 0px 4px 1px gray inset

及

什么也没发生。如果以与第一个样式相同的格式显式指定新样式，则可以使用该样式，请参见

然而，在这种情况下，这并不能真正为您提供所需的转换。解决这一问题的一种方法是使用不同的方式声明样式（参见Paulito的答案），但这可能不可能，这取决于您使用的其他样式。解决这个问题的第二种方法是使用。特别是，在其他颜色保持不变的情况下，只需在此处插入颜色。在代码中，这看起来像这样

first.transition().duration(3000)
  .styleTween("box-shadow", function() {
    var i = d3.interpolate("gray", "blue");
    return function(t) {
        return "0px 0px 4px 1px " + i(t) + " inset";
    };
  });

完成演示