宇宙图反应
用于整合的方便用户图书馆 @ cosmograph/ cosmograph 输入您的反应应用程序。 准备就绪的组件和提供者使交互式知识图探险者——大型实体——与搜索、传奇和跨过滤网的关系网络——与机器学习嵌入的语义图一起在 二维或三维,无需重新执行版式或WebGL.
* 特性
- 知识-图像友好:用搜索、选择、传说、直方图和规模的实体-关系工作量时间表来编写图表
- 2D和3D GPU 通过
spaceDimensions,带有3D的轨道相机和嵌入的可选 Z 坐标 - 宇宙图全能的简单回放组件 API
- 准备使用的互动组件:时光线、直方图、巴斯、传奇、搜索甚至更多
- 访问 Cosmograph 实例和编写原始数据的反应钩
- 完整类型脚本支持
- 共享宇宙图状态的背景提供者
QQ 快速启动
安装软件包 :
npm install @cosmograph/react
获取数据,配置图表并渲染宇宙图 :
import React, { useEffect, useState } from 'react'
import { Cosmograph, CosmographConfig, prepareCosmographData } from '@cosmograph/react'
// Points and links data can be:
// - Array of objects
// - File (.csv/.tsv, .parquet/.pq, .arrow, .json)
// - URL string to a file
// - Apache Arrow Table (binary data Uint8Array/ArrayBuffer)
// - DuckDB table name if connection is passed into the Cosmograph constructor
const rawPoints = [{ id: 'a' }, { id: 'b' }, { id: 'c' }]
const rawLinks = [
{ source: 'a', target: 'b' },
{ source: 'b', target: 'c' },
{ source: 'c', target: 'a' },
]
export const component = (): JSX.Element => {
const [config, setConfig] = useState<CosmographConfig>({})
// Create a config to map your data into Cosmograph's internal format
const dataConfig = {
points: {
pointIdBy: 'id',
},
links: {
linkSourceBy: 'source',
linkTargetsBy: ['target'],
},
}
const loadData = async (): Promise<void> => {
// Prepare data and config for Cosmograph
const result = await prepareCosmographData(dataConfig, rawPoints, rawLinks)
if (result) {
// Update Cosmograph config with prepared output
const { points, links, cosmographConfig } = result
setConfig({ points, links, ...cosmographConfig })
}
}
// Load data when component is mounted
useEffect(() => { loadData() }, [])
return <Cosmograph {...config} />
}
CosmographProvider
CosmographProvider 连接 Cosmograph 实例, 附带组件 CosmographTimeline 财务报告和审定财务报表 CosmographHistogram。将您的组件围起来,以便实现此连接:
import { CosmographProvider, CosmographHistogram, Cosmograph } from '@cosmograph/react'
function App() {
...
return (
<CosmographProvider>
<Cosmograph {...config} />
// Assuming you have a numeric column "value" in your points data
<CosmographHistogram accessor={"value"}>
</CosmographProvider>
)
}
注释: 总是在内部放置宇宙图伴构件
CosmographProvider并确保它已经Cosmograph里面的情况.
useCosmograph
环绕您的应用程序后 CosmographProvider,则 useCosmograph 钩子现在可以用来访问 Cosmograph 举个例子.
import { useCosmograph, CosmographProvider } from '@cosmograph/react'
const FitButton = () => {
const { cosmograph } = useCosmograph()
return (
<button onClick={() => cosmograph.fitView()}>
Fit View
</button>
)
}
const App = () => {
...
return (
<CosmographProvider>
<Cosmograph {...config}/>
<FitButton />
</CosmographProvider>
)
}
注释:
useCosmograph必须召见于作为人类直接后裔的组成部分CosmographProvider。试图在提供者之外使用它会引发错误.
参考文献
Cosmograph 暴露一个 ref 属性,可用于访问基础 Cosmograph 例如,允许您直接接触其方法和属性.
import React, { useRef } from 'react'
import { CosmographRef, Cosmograph } from '@cosmograph/react'
function App () {
...
const cosmograph = useRef<CosmographRef>()
const onClick = (pointIndex: number | undefined) => {
cosmograph.current?.selectPoint(point)
}}
return (
<Cosmograph {...config} onClick={onClick} ref={cosmograph}/>
)
}
可用组件
@cosmograph/react 提供与宇宙图实例相连接并可供使用的一组组件:
Cosmograph: 主要组成部分.CosmographTimeline: 提供一段时间可视化数据的时间表功能.CosmographHistogram: 一个完全自定义的直方图组件.CosmographBars:一个带有绝对条的可视化数据的组件,可以搜索、排序和过滤这些类别.CosmographSizeLegend:用于可视化数据大小的传说组件.CosmographTypeColorLegend: 用于可视化有颜色的数据类型的传说组件.CosmographRangeColorLegend: 以颜色可视化数字数据的组件.CosmographSearch: 以集成的图上选择功能, 强大的搜索您的宇宙图数据 .CosmographPopup:用于显示自定义的 HTML 弹出器的组件,可以被固定在图表上的特定节点或坐标上.- 手巧的组合 按钮 用于常见的图形交互:
CosmographButton: 自定义动作的基础按钮组件.CosmographButtonFitView:自动调整图的缩放和位置,以适应取景口内的所有节点.CosmographButtonPlayPause:切换由力向布局模拟.CosmographButtonZoomInOut:提供用于缩放的按钮.CosmographButtonRectangularSelection:允许用户通过绘制矩形来选择节点.CosmographButtonPolygonalSelection:允许用户通过绘制自定义多边形来选择节点.
注释: 所有组件包括支持参考,可通过下列途径访问:
useRef或者说useCallback用于开发者拥有更好的控制和管理. 请检查access-date=中的日期值 (帮助) Cosmograph React Docs了解更多细节.
问题和贡献
虽然目前已关闭来源,我们欢迎您的反馈! 帮助改进宇宙图,方法是提交错误报告,并在我们中突出想法 问题存放处。 。 。 .
许可证
宇宙图根据 CC-BY-NC-4.0. 许可证 任何非商业用途都可以免费使用。 如果你想在商业项目中使用,请 联系我们。 。 。 .
宇宙空间
@ cosmograph/ cosmograph - JavaScript 和 TypeScript 的宇宙图库
py 相册 - Python 数据科学工作流程的 Jupyter 部件