Question

我想基于css中的样式进行d3过渡。但是我无法为box-shadow执行此操作。我犯了错误还是不支持？

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;
}

这是小提琴中的例子： http://jsfiddle.net/zasDK/4/

以下是一个适用于background-color 的工作示例（我的代码基于此代码）： http://jsfiddle.net/linssen/zasDK/

Answer 1

问题是，当您使用D3检索它时，您将获得框阴影样式的规范形式。这是＆＃34; rgb（0,0,255）0px 0px 4px 1px inset＆＃34;在这种情况下，与您在CSS中指定它的方式完全不同。现在D3不知道如何在字符串之间进行插值

0px 0px 4px 1px gray inset

和

rgb(0, 0, 255) 0px 0px 4px 1px inset

没有任何反应。如果您以与第一种格式相同的格式明确指定新样式，则可以使用它，请参阅this fiddle。

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

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";
    };
  });

完整演示here。

Answer 2

如果您只想为阴影颜色进行转换，可以使用它继承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;
}

动画color代替box-shadow：

first.transition().duration(3000).style('color', color);

查看更新的fiddle

D3过渡框阴影中的CSS值

2 个答案: