@ data- ui/ 图像

用于创建直方图的 React + d3 库. 垂直或水平,原始数据或被取出的数据,数字或绝对的取出,计数或密度,累计或不累计.

npm install --save @data-ui/histogram

拆解它住在这里 (原始内容存档于2017-10-21). williaster.github.io/data-ui。 。 。 .

示例用途

类似于 @data-ui/xy-chart 软件包,这个 @data-ui/histogram 软件包导出母程序 <Histogram /> 集装箱组件,使其具有特殊性,并在整个儿童中进行协调。 您可以通过可选激活的母容器 <BarSeries /> 和(或) <DensitySeries /> 以及 <XAxis /> 财务报告和审定财务报表 <YAxis />。 。 。 .

import { Histogram, DensitySeries, BarSeries, withParentSize, XAxis, YAxis } from '@data-ui/histogram';

const ResponsiveHistogram = withParentSize(({ parentWidth, parentHeight, ...rest}) => (
  <Histogram
    width={parentWidth}
    height={parentHeight}
    {...rest}
  />
);

const rawData = Array(100).fill().map(Math.random);

...
  render () {
    return (
      <ResponsiveHistogram
        ariaLabel="My histogram of ..."
        orientation="vertical"
        cumulative={false}
        normalized={true}
        binCount={25}
        valueAccessor={datum => datum}
        binType="numeric"
        renderTooltip={({ event, datum, data, color }) => (
          <div>
            <strong style={{ color }}>{datum.bin0} to {datum.bin1}</strong>
            <div><strong>count </strong>{datum.count}</div>
            <div><strong>cumulative </strong>{datum.cumulative}</div>
            <div><strong>density </strong>{datum.density}</div>
          </div>
        )}
      >
        <BarSeries
          animated
          rawData={rawData /* or binnedData={...} */}
        />
        <XAxis />
        <YAxis />
      </ResponsiveHistogram>
    );
  }

与民主 直方图操场。 。 。 .

构成部分

检查故事本中的示例源代码和PropTable标签 (原始内容存档于2017-10-21). williaster.github.io/data-ui。 。 。 .

<Histogram />

<*Series />

<BarSeries /> 财务报告和审定财务报表 <DensitySeries /> 组件接受 无论是 rawData 或者说 binnnedData。只要每个数据值可以用直方图访问,原始数据可以采用任何格式 valueAccessor 函数。 嵌入式数据应具有以下形状:

export const numericBinnedDatumShape = PropTypes.shape({
  id: PropTypes.string.isRequired,
  bin0: PropTypes.number.isRequired,
  bin1: PropTypes.number.isRequired,
  count: PropTypes.number.isRequired,
});

export const categoricalBinnedDatumShape = PropTypes.shape({
  id: PropTypes.string.isRequired,
  bin: PropTypes.string.isRequired,
  count: PropTypes.number.isRequired,
});

如果两者兼有 rawData 财务报告和审定财务报表 binnnedData 提供, rawData 被忽略.

<BarSeries />

<DensitySeries />

对于 原始数据 这是 数字,则 <DensitySeries /> 绘制概率密度函数的估计数,即内核密度估计数。 如果将预先汇总和/或绝对数据传递给系列,则它会根据数据计数绘制一个数值的区域图.

<XAxis /> 财务报告和审定财务报表 <YAxis />

工具提示

直方图支持工具提示 BarSeries编辑 简单 将工具提示从框中取出的方式是: renderTooltip 函数改为 <Histogram /> 如以上例子所示。 此函数以形状为对象 { event, datum, data, color } 如上所示,作为输入并应当返回工具提示(而不是工具提示容器!)的内部内容. datum 对应 已弹入 数据点,请参见以上指定形状,这些形状取决于您的本位是绝对的还是数字的. color 代表条形填充。 如果此函数返回 a falsy 值,将不提供工具提示.

盖子下面,这个包住 <Histogram /> 导出部件 <WithTooltip /> HOC,它包起来 svg 在一个 <div /> ,并处理 HTML 工具提示的定位和渲染,其内容由返回 renderTooltip()。该工具提示意识到其容器的界限,应当“明智”定位.

如果你想在工具提示的渲染上更自定义,你可以做以下任一工作:

1. 滚动自己的工具提示定位逻辑并传递 onMouseMove 财务报告和审定财务报表 onMouseLeave 函数到 Histogram。这些职能移交给 <BarSeries /> 儿童,以签名方式召唤 onMouseMove({ data, datum, event, color }) 财务报告和审定财务报表 onMouseLeave() 在适当的触发.

2. 环绕 <Histogram /> 内 <WithTooltip /> 接受额外定制的道具:

主题

具有以下形状的主题对象可以传递到 <Histogram /> 用于样式图、轴和系列。 或者,按键(例如 xAxisStyles)可以直接传递到轴元件上.

见 @data-ui/theme 举个例子.

export const themeShape = PropTypes.shape({
  gridStyles: PropTypes.shape({
    stroke: PropTypes.string,
    strokeWidth: PropTypes.number,
  }),
  xAxisStyles: PropTypes.shape({
    stroke: PropTypes.string,
    strokeWidth: PropTypes.number,
    label: PropTypes.shape({
      bottom: PropTypes.object,
      top: PropTypes.object,
    }),
  }),
  yAxisStyles: PropTypes.shape({
    stroke: PropTypes.string,
    strokeWidth: PropTypes.number,
    label: PropTypes.shape({
      left: PropTypes.object,
      right: PropTypes.object,
    }),
  })
  xTickStyles: PropTypes.shape({
    stroke: PropTypes.string,
    tickLength: PropTypes.number,
    label: PropTypes.shape({
      bottom: PropTypes.object,
      top: PropTypes.object,
    }),
  }),
  yTickStyles: PropTypes.shape({
    stroke: PropTypes.string,
    tickLength: PropTypes.number,
    label: PropTypes.shape({
      left: PropTypes.object,
      right: PropTypes.object,
    }),
  }),
});

发展

npm install
yarn run dev # or 'build'