visx

动机

目标

目标是创建一个组件库，您可以使用它来创建您自己的可复用图表库或炫酷的自定义一次性图表。visx 很大程度上不拘泥于某种风格，旨在在其之上进行构建。减小包大小，只使用您需要的包。

如何实现？

在底层，visx 使用 d3 进行计算和数学运算。如果您正在 visx 之上创建您自己的强大的图表库，则可以轻松创建一个完全隐藏 d3 的组件 API。这意味着您的团队可以像使用可复用的 React 组件一样轻松地创建图表。

为什么这样做？

混合使用两种更新 DOM 的思维模型从来都不是一件好事。将 d3 代码复制粘贴到`componentDidMount()`中就是这样。这个组件集合让您可以轻松构建您自己的可复用可视化图表或库，而无需学习 d3。不再需要选择器或`enter()`/`exit()`/`update()`。

常见问题

1. visx代表什么？

   visx 代表可视化组件 (visualization components)。

2. 你们计划支持动画/过渡吗？

   visx的一个常见批评是它没有内置动画，但这是一个深思熟虑的选择。不内置它是一个强大的功能。

   想象一下，您的应用程序已经捆绑了`react-motion`，添加一个假设的`@visx/animation`会造成膨胀。由于 visx 是 React 的，它已经支持所有 React 动画库。

   图表库就像样式指南一样。每个组织或应用程序最终都会希望完全控制自己的实现。

   visx 使这更容易。无需每次都重新发明轮子。

   更多信息：https://github.com/airbnb/visx/issues/6

   示例

   • 使用react-move的可折叠树，作者 @techniq (演示) (径向演示)
   • 使用react-spring的动画，作者 @drcmda (演示)

3. 我必须使用所有包才能创建图表吗？

   不需要！选择您需要的包。

4. 我可以使用它为我的团队创建我自己的图表库吗？

   请随意使用。

5. visx 是否与preact一起使用？

   是的！需要为react + react-dom设置别名并使用preact-compat。

6. 我喜欢使用 d3。

   我也是。