react 图表_JavaScript教程：React-vis的动画图表

react 图表

最后两个 个星期 ，我们建立了尤伯杯的开源库的几个图表，作出React，可见，在纽约市的绘图流行的婴儿名字的数据集。 本周，我们将研究在图表中添加一些动画，以便用户直观地了解数据随时间的变化。 在这篇文章的结尾，我们将提供一组图表，这些图表可以按种族和动画过渡进行过滤。

在进入任何动画之前，我们首先需要重构将CSV数据按摩成图表所期望的格式的方式。 当前，这一切都发生在组件构造函数中。 因为稍后要过滤掉值时，我们将需要调用许多相同的逻辑，所以我们要做的第一件事是将处理抽象为方法。 我们仍将在构造函数中调用这些方法，但是当过滤器发生更改时，我们也可以调用它们，而无需重复执行。

[了解React？ 不要错过InfoWorld的React入门教程 。 •教程： 针对初学者的React编程 。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

我们还必须使我们的一些处理代码更具动态性。 我们有一些与最受欢迎的婴儿名字相关的硬编码值，但是我们希望基于我们预先过滤出种族并传入的数据集来动态计算这些值。本着一厢情愿的精神，我们可以勾勒出我们如何理想地处理数据：

calculateChartData(data) {
    const totalBabiesByYear = this.getTotalBabiesByYear(data);
    const top10BabyNames = this.getTopBabyNames(data, 10);
    const namesWithData = this.getYearlyDataForNames(data, top10BabyNames);
    return {
      ethnicityFilter,
      totalBabiesByYear,
      namesWithData,
    };
  }

// We can then use this method in our constructor….
const newData = this.calculateChartData(data);
// … or later on when we want to filter
const newData = this.calculateChartData(data.filter((d) => d.ethnicity === someValue))

这些方法还不存在并不重要-实际上，这就是重点。 通过想象一种与数据交互的清晰方法，我们可以确定需要创建哪些抽象。 例如，我们设想了一个getTopBabyNames函数，该函数将接收一组数据和一个数字，并将返回该数目的最受欢迎的名称。 这个虚构的API指导了我们的实际实现。 我不会逐步进行重构和实现，但是您可以在GitHub上看到所有代码 。

既然我们知道可以按照图表期望的形状过滤数据并重新生成数据，我们就可以开始考虑如何对图表进行动画处理了。 幸运的是，React-vis库具有一致的API，可让我们向任何系列添加单个属性以启用动画过渡： animation 。 我们可以将animation属性添加到每个LineMarkSeries组件以及VerticalBarSeries组件中：

<LineMarkSeries
  animation
  onValueMouseOver={(d) => this.setState({hoverData: d})}
  key={name}
  data={data}
/>

// ...and

<VerticalBarSeries
  animation
  data={totalBabiesByYear}
/>

当我们传递的数据发生变化时，React-vis将使用React-motion动画库自动为我们处理动画。 可以使用上图所示的animation属性以最简单的形式启用animation ，但是也可以使用其他两种用法，这两种用法都可以自定义动画。

而不是简单地包括animation属性，可以将其设置为一个字符串值，它是以下值之一： noWobble ， gentle ， wobbly ，或stiff 。 这些值充当动画的预设。 理解它们的最好方法是看到它们的实际效果。 React-vis文档站点上有一个实时演示 ，演示了每个预设。

启用动画的第三种方式涉及将animation属性设置为具有damping和stiffness属性以及可选的nonAnimatedProps键的对象。 这种启用动画的方法使您可以直接访问React-motion，并且需要更深入地了解这些值的变化如何影响动画。

IDG

只需添加animation属性即可提供向图表添加一些操作所需的大多数功能。 当数据中发生某些过渡时，会有一些意外的行为，从而导致完全没有动画效果。 根本原因是转换之前的数据和转换之后的数据没有重叠的值，这意味着我们无法在它们之间进行插值。 从数据角度来看，这是有道理的，但从用户角度来看，这看起来很奇怪。

使用React-vis在这里和那里的小问题都大大简化了您创建交互式动画图表的难度。 过去，我曾在重型交互式仪表板上使用该库，将来可能会再次使用它。 您知道使用React-vis时有任何窍门或技巧吗？ 您有杀手alternative吗？ 继续在Twitter上的对话： @freethejazz

翻译自: https://www.infoworld.com/article/3398598/javascript-tutorial-animated-charts-with-react-vis.html

react 图表