736

0

Visx

visx 是可重用的可视化组件的集合。visx 结合了 d3 的强大功能来生成您的可视化,以及响应更新 DOM 的好处。

覆盖状态

visx

visx 是可重用的低级可视化组件的集合。visx 结合了 d3 的强大功能来生成您的可视化,以及响应更新 DOM 的好处。

Docs Gallery Blog Slack #visx Changelog Getting started tutorial

用法

混音故障

让我们制作一个简单的条形图。

首先我们将安装相关的包:

npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale

import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';

// We'll use some mock data from `@visx/mock-data` for this.
const data = letterFrequency;

// Define the graph dimensions and margins
const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };

// Then we'll create some bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;

// We'll make some helpers to get at the data we want
const x = d => d.letter;
const y = d => +d.frequency * 100;

// And then scale the graph by our data
const xScale = scaleBand({
  range: [0, xMax],
  round: true,
  domain: data.map(x),
  padding: 0.4,
});
const yScale = scaleLinear({
  range: [yMax, 0],
  round: true,
  domain: [0, Math.max(...data.map(y))],
});

// Compose together the scale and accessor functions to get point functions
const compose = (scale, accessor) => data => scale(accessor(data));
const xPoint = compose(xScale, x);
const yPoint = compose(yScale, y);

// Finally we'll embed it all in an SVG
function BarGraph(props) {
  return (
    <svg width={width} height={height}>
      {data.map((d, i) => {
        const barHeight = yMax - yPoint(d);
        return (
          <Group key={`bar-${i}`}>
            <Bar
              x={xPoint(d)}
              y={yMax - barHeight}
              height={barHeight}
              width={xScale.bandwidth()}
              fill="#fc2e1c"
            />
          </Group>
        );
      })}
    </svg>
  );
}

// ... somewhere else, render it ...
// <BarGraph />

有关使用的更多示例 visx,请查看图库

动机

目标

目标是创建一个组件库,您可以使用它来制作自己的可重用图表库或光滑的自定义一次性图表。visx 在很大程度上是没有意见的,并且是建立在其之上的。减少捆绑包的大小并仅使用您需要的包。

如何?

在引擎盖下,visx 使用 d3 进行计算和数学运算。如果您在 visx 之上创建自己的很棒的图表库,那么创建一个完全隐藏 d3 的组件 api 很容易。这意味着您的团队可以像使用可重用的反应组件一样轻松地创建图表。

但为什么?

混合使用两种心理模型来更新 DOM 从来都不是一个好时机。复制和粘贴 d3 代码 componentDidMount()就是这样。这个组件集合让您可以轻松构建自己的可重用可视化图表或库,而无需学习 d3。没有更多选择或 enter()/ exit()/ update()

路线图

很多即将推出,请查看路线图

常问问题

  1. 代表什么 visx

    visx 代表可视化组件。

  2. 你打算支持动画/过渡吗?

    对 visx 的一个常见批评是它没有内置动画,但这是一个有意识的选择。不烘烤它是一个强大的功能。

    想象一下您的应用程序已经捆绑 react-motion了,添加一个假设 @visx/animation是臃肿。由于 visx 是 react,它已经支持所有的 react 动画库。

    图表库就像风格指南。每个组织或应用程序最终都希望完全控制自己的实施。

    visx 使每个人都更容易做到这一点。无需每次都重新发明轮子。

    更多信息:#6

    例子:

    • @techniq的可折叠树react-move( 演示)(径向演示)
    • @drcmda react-spring制作的动画 (演示)
  3. 我必须使用每个包来制作图表吗?

    不!挑选您需要的packages。

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

    请做。

  5. visx 与 preact 一起使用

    对!需要别名 react+react-dom并使用 preact-compat.

  6. 我喜欢使用 d3。

    我也是。

发展

请参阅CONTRIBUTING.md

✌️

MIT

福萨状态