D3转换框阴影中的CSS值

我想根据基于CSS的样式进行d3转换。但是我无法为box-shadow做到这一点。我犯了一个错误还是不支持？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; 
}

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

这里是一个工作的例子，（在这一个我根据我的代码）与background-color工作： http://jsfiddle.net/linssen/zasDK/

来源

2014-07-24 Kevin

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

来源

2014-07-24 13:25:22 paulitto

的问题是，你得到的规范形式当您使用D3检索时，您可以使用箱形阴影样式。在这种情况下，这是“rgb（0，0，255）0px 0px 4px 1px inset”，与您在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。

来源

2014-07-24 13:46:44

D3转换框阴影中的CSS值

回答

相关问题