Animate NVD3 Chart (заполнение) - Internet Explorer 11 - PullRequest
Новая
       17

Animate NVD3 Chart (заполнение) - Internet Explorer 11

0 голосов
/ 01 мая 2019

Я сейчас пытаюсь анимировать цвет простой круговой диаграммы NVD3.

К сожалению, кажется, что подобные анимации SVG не поддерживаются в IE11.

Я сделал простой пример, используя jsfiddle, который работает в Firefox и Edge: https://jsfiddle.net/wb4pokf9/

Я читал, что IE11 не поддерживает переходы и анимацию в старых постах. Есть ли какие-либо известные способы решения этой проблемы?

Спасибо за любую информацию по этой теме заранее!

В приведенном выше примере jsfiddle используется следующий код: 

var h = 300;
var r = 150;

var data = [{
    "label": "Test A",
    "value": 80
  },
  {
    "label": "Test B",
    "value": 20
  }
];

nv.addGraph(function() {
  var chart = nv.models.pieChart()
    .x(function(d) {
      return d.label
    })
    .y(function(d) {
      return d.value
    })
    .showLabels(true)
    .labelType("percent")
    .donut(true);

  d3.select("#chart svg")
    .datum(data)
    .call(chart);

  return chart;
});
#chart svg {
  height: 600px;
}

.nv-label text {
  font-family: Droid Sans;
}

@keyframes color {
  0% {
    fill: green;
  }
  50% {
    fill: red;
  }
}

.nv-slice:nth-child(1) {
  animation: color 30s infinite;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.js"></script>

<div id="chart">
  <svg></svg>
</div>
...