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值

回答

相關問題