IE D3 JavaScript CSS3中的旋转动画_Javascript_Css_Internet Explorer_Animation_D3.js

IE D3 JavaScript CSS3中的旋转动画

javascript css internet-explorer animation d3.js

IE D3 JavaScript CSS3中的旋转动画,javascript,css,internet-explorer,animation,d3.js,Javascript,Css,Internet Explorer,Animation,D3.js,下面的代码可以在Chrome中完美运行（我将其托管在本地WAMP服务器上）。删除所有“@-webkit-”实例后，我希望它能在IE11中工作。事实并非如此。有趣的是，一半的动画可以工作（路径淡入淡出，但不旋转）。我花了大约3个小时试图弄明白为什么它在IE中不起作用，但我不知所措。有人有什么想法吗？谢谢（另外，如果有人想尝试一下FireFox，那就试试吧，我今晚已经束手无策了：）） Index.html： <!DOCTYPE html> <meta charset="utf-8"

下面的代码可以在Chrome中完美运行（我将其托管在本地WAMP服务器上）。删除所有“@-webkit-”实例后，我希望它能在IE11中工作。事实并非如此。有趣的是，一半的动画可以工作（路径淡入淡出，但不旋转）。我花了大约3个小时试图弄明白为什么它在IE中不起作用，但我不知所措。有人有什么想法吗？谢谢（另外，如果有人想尝试一下FireFox，那就试试吧，我今晚已经束手无策了：））

Index.html：

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <link rel="stylesheet" type="text/css" href="http:\\localhost\RealDataProject\circleAnimation.css">

</head>
<script src="http:\\localhost\Wordpress-enfoldchild\wp-content\themes\enfold-child\assets\js\jquery-1.11.0.min.js"> </script>
<script src="http:\\localhost\wordpress-enfoldchild\wp-content\themes\enfold-child\assets\js\d3.min.js"></script>
<svg class="svg_dount1" id="svg_donut1" width="800" height="800"></svg> 

<!--<p class="companyName">Badass<br/>Studios</p> -->

<script>

var globalData1 = [];
var globalData2 = [];
var globalData3 = [];
var globalData4 = [];
var test;
var sheets = document.styleSheets;
var sheet = document.styleSheets[0];

d3.tsv("http://localhost/RealDataProject/data.tsv", function(error, data){
    data.forEach(function(d,i){
    globalData1.push([d.value1, d.value2, d.color]);
});
    firstRing(globalData1);
});

d3.tsv("http://localhost/RealDataProject/data2.tsv", function(error, data){
    data.forEach(function(d,i){
    globalData2.push([d.value1, d.value2, d.color]);
});
    secondRing(globalData2);
});

d3.tsv("http://localhost/RealDataProject/data3.tsv", function(error, data){
    data.forEach(function(d,i){
    globalData3.push([d.value1, d.value2, d.color]);
});
    thirdRing(globalData3);
});

d3.tsv("http://localhost/RealDataProject/data4.tsv", function(error, data){
    data.forEach(function(d,i){
    globalData4.push([d.value1, d.value2, d.color]);
});
    fourthRing(globalData4);
});

var cScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);

var vis = d3.select("#svg_donut1");

function firstRing(data){
var arc = d3.svg.arc() .innerRadius(50) .outerRadius(100) .startAngle(function(d){return        cScale(d[0]);}) .endAngle(function(d){return cScale(d[1]);});

vis.selectAll("g") .data(data) .enter() .append("path").attr("class", "path1") .attr("d", arc)     .style("fill", function(d){return d[2];}).attr("transform",     "translate(250,-300)").transition().duration(1000).delay(0).attr("transform", "translate(0,0)");

};

function secondRing(data){
var arc2 = d3.svg.arc() .innerRadius(102) .outerRadius(110) .startAngle(function(d){return     cScale(d[0])+5;}) .endAngle(function(d){return cScale(d[1])+5;});

vis.selectAll("g") .data(data) .enter() .append("path").attr("class", "path2") .attr("d", arc2)     .style("fill", function(d){return d[2];}).attr("transform",     "translate(-600,30)").transition().duration(500).delay(0).attr("transform", "translate(0,0)");
}

function thirdRing(data){
var arc3 = d3.svg.arc() .innerRadius(114) .outerRadius(150) .startAngle(function(d){return     cScale(d[0])+15;}) .endAngle(function(d){return cScale(d[1])+15;});

vis.selectAll("g") .data(data) .enter() .append("path").attr("class", "path3") .attr("d", arc3)     .style("fill", function(d){return d[2];}).attr("transform",     "translate(-600,-900)").transition().duration(2000).delay(0).attr("transform", "translate(0,0)");
}

function fourthRing(data){
var arc4 = d3.svg.arc() .innerRadius(152) .outerRadius(170) .startAngle(function(d){return     cScale(d[0])+35;}) .endAngle(function(d){return cScale(d[1])+35;});

var test1 = vis.selectAll("g") .data(data) .enter();
var test2 = test1 .append("path") .attr("class", "path4") .attr("d", arc4) .style("fill",     function(d){return d[2];}).attr("transform",     "translate(-400,700)").transition().duration(1500).delay(0).attr("transform", "translate(0,0)");
}




function func1(){
    sheet.insertRule(".path1 {-webkit-animation:spin1 4s linear infinite; z-index: 1; } ", 0);
}

function func2(){
    sheet.insertRule(".path2 {-webkit-animation:spin2 1s linear infinite; z-index: 0; } ", 0);
}

function func3(){
    sheet.insertRule(".path3 {-webkit-animation:spin3 6s linear infinite; z-index: 3; } ", 0);
}

function func4(){
    sheet.insertRule(".path4 {-webkit-animation:spin4 8s linear infinite; z-index: 2; } ", 0);
}


    var path4 = document.getElementsByClassName("path4");
    path4.onclick=function(){alert("hi");};




setTimeout(func1,1000);
setTimeout(func2,500);
setTimeout(func3,2000);
setTimeout(func4,1500);


d3.select("p").transition().duration(3000).delay(2000).style("opacity", 1);

</script>

</body>

谢谢

您删除了关键帧动画中的

@-webkit-

，但您是否也删除了

-webkit-

属性前面的

-webkit transform

？easwee-我从index.html中删除了-webkit-的每个实例，并尝试从css中删除“-webkit-”和“-webkit transform”，no luck.IE当前不支持SVG的声明性动画，无论它是CSS动画关键帧还是SVG动画元素。在IE中设置SVG动画的唯一方法是在JavaScript中创建动画帧（例如，通过使用d3的转换）。

@-webkit-keyframes spin1 {
    50% { opacity: 0; } 
    100% { -webkit-transform: rotate(360deg); } 
}

@-webkit-keyframes spin2 {
    50% { opacity: 0; } 
    100% { -webkit-transform: rotate(-360deg); } 
}

@-webkit-keyframes spin3 {
    50% { opacity: 0; } 
    100% { -webkit-transform: rotate(-360deg); } 
}

@-webkit-keyframes spin4 {
    50% { opacity: 0; } 
    100% { -webkit-transform: rotate(-360deg); } 
}

@font-face {
    font-family: 'xyzfont';
    src: url('font/Rebellion.otf'); /* IE9 Compat Modes */
}

.companyName{
    position: fixed;
    left: 120px;
    bottom: 260px;
    font-size: 90pt;
    opacity: 0;
    text-align: center;
    font-family: xyzfont, Georgia, Arial;
    color: #000740;
    line-height: 90px;
}

svg{
    padding-left: 400px;
    padding-top: 200px;
}