@acdh/network-visualization 中文文档教程

Question

network-visualization

这是一个 React 组件，用于可视化 2D 和 3D 图形数据。 它是基于 force-graph 和 3d-force-graph，它使用 d3-force 和 d3-force-3d 用于模拟。

How to install

从 NPM 将其安装为一个包：

npm i @acdh/network-visualization

您还可以将 UMD 构建包含在 script 标记中，并访问组件 在 NetworkVisualization 全局：

<script src="network-visualization.umd.js"></script>

UMD 构建也可通过 CDN 获得：

<script src="https://unpkg.com/@acdh/network-visualization@0/lib/network-visualization.umd.js"></script>

使用 UMD 构建时，请确保还包括 react，如果您打算 使用 3D 组件 three（注意 three 不遵循语义 版本控制，最后一个已知的工作版本是 0.126.1）：

<script
  crossorigin
  src="https://unpkg.com/react@16/umd/react.production.min.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/three@0.126.1/build/three.min.js"
></script>

请参阅 examples folder 了解如何使用 UMD 构建。

How to use

该包导出三个组件：基本的 和 组件，以及一个 组件 包装可视化组件并处理选择/取消选择节点 图。

对于 2D 可视化：

import React from 'react'
import { Visualization } from '@acdh/network-visualization'

const MyComponent = props => (
  <div style={{ position: 'relative', width: '600px', height: '600px' }}>
    <Visualization
      graph={{
        nodes: [
          { id: 'n1', label: 'Node 1', type: 't1' },
          { id: 'n2', label: 'Node 2', type: 't2' },
          { id: 'n3', label: 'Node 3', type: 't2' },
        ],
        edges: [
          { id: 'e1', label: 'Edge 1', source: 'n1', target: 'n2', type: 'r1' },
          { id: 'e2', label: 'Edge 2', source: 'n1', target: 'n3', type: 'r1' },
        ],
        types: {
          nodes: [
            { id: 't1', label: 'Category 1', color: '#006699' },
            { id: 't2', label: 'Category 2', color: '#669900' },
          ],
          edges: [{ id: 'r1', label: 'Relation 1', color: '#990066' }],
        },
      }}
    />
  </div>
)

graph 属性是唯一必需的属性。 它必须包括图的节点 和边，以及描述节点和边类型的 types 对象。 全部 图中的实体可以有一个可选的 label 和一个 color，其中标签 在单个节点/边上定义的颜色优先于标签和 为节点类型/边缘类型定义的颜色。

请注意，nodes、edges、types.nodes 和 types.edges 可以提供为 数组，或者作为id映射的对象，eg：

{
  nodes: {
    n1: {
      id: 'n1'
    },
    n2: {
      id: 'n2',
    },
  },
}

当图数据在组件的生命周期发生变化时，默认new 节点和边将被添加到之前提供的图表中。 如果你想 replace 图形，您可以将 replace 属性添加到图形对象：

 {
   nodes: [],
   edges: [],
   types: {
     edges: [],
     nodes: []
   },
+  replace: true,
 }

Selection controls

允许选择/取消选择节点的单击交互可以添加 组件：

import React from 'react'
import { SelectionControls as Visualization } from '@acdh/network-visualization'

const MyComponent = props => (
  <div style={{ position: 'relative', width: '600px', height: '600px' }}>
    <Visualization dimensions={3} graph={props.graph} />
  </div>
)

默认情况下，SelectionControls是一个不受控制的组件，即它持有 内部选定节点的状态。 可以将其切换为受控 通过使用 selectedNodeIds 属性提供一组 Set 组件。

Live example

您可以通过本地查看故事书中组件的实时示例 运行 npm run storybook，或者 此处。

Props

Visualization and Visualization3D

prop	type	default	description
backgroundColor	string		Canvas color
dagMode	string | null	null	Layout mode for directed acyclical graphs
graph	object		Graph data, see above for the expected format
height	number	container height	Canvas height
highlightedNodeIds	Set\<string>		Ids of highlighted nodes
onNodeClick	function		Event callback fired when clicking on a node. Receives an object with { node, graph, forceGraph } as argument
onSimulationEnd	function		Event callback fired when simulation ends
onSimulationTick	function		Event callback fired every simulation tick
onZoom	function		Event callback fired on every zoom/pan interaction
selectedNodeIds	Set\<string>		Ids of selected nodes
showNeighborsOnly	bool	false	Only how neighbors of selected nodes
width	number	container width	Canvas width

SelectionControls

具有 中的所有属性，并添加：

prop	type	default	description
dimensions	number	2	2D or 3D layout
onNodeDeselect	function		Event callback fired when node is deselected. Receives the node object as argument (and the set of currently selected node ids when used as an uncontrolled component)
onNodeSelect	function		Event callback fired when node is selected. Receives the node object as argument (and the set of currently selected node ids when used as an uncontrolled component)