带amcharts的实时连接图3-反应视觉错误

Question

我正在尝试使用amcharts3-react实现实时连接图，该图显示人们最近连接的“脉动点”。

每隔10秒钟，我都会对API端点进行一次调用，并收到一个连接坐标列表，这些连接坐标是作为dataProvider选项逐渐提供给AmCharts.React组件的：

// The connection coordinates objects look like this
dots = [
  {
    id: 'js51qv168q8bq65beqeth',
    latitude: 42.488,
    longitude: -82.474
  },
  {
    id: '45gf78n1g7nsn1yty54hjgk',
    latitude: 42.488,
    longitude: -82.474
  }
];


// Options
const options = {
  type: 'map',
  theme: 'light',
  addClassNames: true,
  hideCredits: true,
  dataProvider: {
    getAreasFromMap: true,
    map: 'worldLow',


    // Here we give the coordinates to
    // the dataProvider
    images: dots.map(dot => ({
      ...dot,
      key: dot.id,
      color: '#027fe8',
      type: 'circle',
      scale: 1,
      zoomLevel: 2.74,
      width: 20,
      height: 20,
      centered: true,
    })),
  },
};

然后我在css中的点上添加脉动动画：

.amcharts-map-image {
  opacity: 0;
  animation: pulse 1s ease-out infinite;
  animation-iteration-count: 3;
}

问题是，每次给AmCharts.React组件一个新的dataProvider时，所有点的css动画都会重新启动，makes it look glitchy。

我不知道我做对了吗

谢谢。