force-directed-graph-component
Version:
force directed graph component
350 lines • 9.74 kB
JavaScript
// 数据格式示例
// {
// nodes: [
// {
// id: '0001',
// group: '1',
// name: 'test',
// value: '1',
// // 可选，配置单个节点样式
// node: {
// type: 'rect',
// width: 40,
// height: 40,
// radius: 2
// }
// }
// ],
// links: [
// { relationship: 'ACTED_IN', source: 'economy', target: '330825',
// // 可选，配置单个路径和文字样式（颜色和大小）
// style: {
// color: '#000',
// width: 2
// },
// linkText: {
// fontSize: 8,
// color: 'red'
// }
// },
// ]
// }
export const forceData = {
nodes: [
{ id: 'economy', group: 1, name: '经济类', value: 1, node: {
type: 'rect',
width: 40,
height: 40,
radius: 2
}, nodeText: {
fontSize: 8
} },
{ id: 'service', group: 1, name: '服务类', value: 1, node: {
type: 'rect',
width: 40,
height: 40,
radius: 2
} },
{ id: 'livelihood', group: 1, name: '民生类', value: 1, node: {
type: 'rect',
width: 40,
height: 40,
radius: 2
} },
{ id: '330802', group: 2, name: '柯城区', value: 1, node: {
type: 'rect',
width: 34,
height: 34,
radius: 10
} },
{ id: '330803', group: 2, name: '衢江区', value: 1, node: {
type: 'rect',
width: 34,
height: 34,
radius: 10
} },
{ id: '330825', group: 2, name: '龙游县', value: 1, node: {
type: 'rect',
width: 34,
height: 34,
radius: 10
} },
{ id: '330881', group: 2, name: '江山市', value: 1, node: {
type: 'rect',
width: 34,
height: 34,
radius: 10
} },
{ id: '330822', group: 2, name: '常山县', value: 1, node: {
type: 'rect',
width: 34,
height: 34,
radius: 10
} },
{ id: '330824', group: 2, name: '开化县', value: 1, node: {
type: 'rect',
width: 34,
height: 34,
radius: 10
} },
{ id: '202205110001', group: 3, name: '高风险事件01', value: 1, node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205110002', group: 3, name: '高风险事件02', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205110003', group: 3, name: '高风险事件03', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205111001', group: 4, name: '中风险事件01', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205111002', group: 4, name: '中风险事件02', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205111003', group: 4, name: '中风险事件03', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205111004', group: 4, name: '中风险事件04', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205112001', group: 5, name: '低风险事件01', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205112002', group: 5, name: '低风险事件02', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205112003', group: 5, name: '低风险事件03', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205112004', group: 5, name: '低风险事件04', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205112005', group: 5, name: '低风险事件05', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205112006', group: 5, name: '低风险事件06', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{ id: '202205112007', group: 5, name: '低风险事件07', value: 1,node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
} },
{
id: '2022051120011', group: 6, name: 'center', value: 10, node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
}
},
{
id: '202205112008', group: 6, name: 'center', value: 10, node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
}
},
{
id: '202205112009', group: 6, name: 'center', value: 10, node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
}
},
{
id: '2022051120010', group: 6, name: 'center', value: 10, node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
}
},
{
id: '2022051120012', group: 6, name: 'center', value: 10, node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
}
},
{
id: '2022051120013', group: 6, name: 'center', value: 10, node: {
type: 'rect',
width: 20,
height: 20,
radius: '50%'
}
}
],
links: [
{ relationship: '1', source: '2022051120011', target: '202205112008' },
{ relationship: '1', source: '2022051120011', target: '202205112009' },
{ relationship: '1', source: '2022051120011', target: '2022051120010' },
{ relationship: '1', source: '2022051120011', target: '2022051120012' },
{ relationship: '1', source: '2022051120011', target: '2022051120013' },
{ relationship: 'ACTED_IN', source: 'economy', target: '330825', style: {
color: '#000',
}, linkText: {
fontSize: 8,
color: 'red'
} },
{ relationship: 'ACTED_IN', source: 'economy', target: '330822' },
{ relationship: 'ACTED_IN', source: 'economy', target: '330824' },
{ relationship: 'ACTED_IN', source: 'service', target: '330825' },
{ relationship: 'ACTED_IN', source: 'service', target: '330881' },
{ relationship: 'ACTED_IN', source: 'service', target: '330824' },
{ relationship: 'ACTED_IN', source: 'livelihood', target: '330802' },
{ relationship: 'ACTED_IN', source: 'livelihood', target: '330803' },
{ relationship: 'ACTED_IN', source: 'livelihood', target: '330881' },
{ relationship: 'ACTED_IN', source: 'livelihood', target: '330822' },
{
relationship: 'ACTED_IN',
source: '330802',
target: '202205110001'
},
{
relationship: 'ACTED_IN',
source: '330802',
target: '202205112001'
},
{
relationship: 'ACTED_IN',
source: '330803',
target: '202205110001'
},
{
relationship: 'ACTED_IN',
source: '330803',
target: '202205110002'
},
{
relationship: 'ACTED_IN',
source: '330803',
target: '202205111001'
},
{
relationship: 'ACTED_IN',
source: '330803',
target: '202205111002'
},
{
relationship: 'ACTED_IN',
source: '330803',
target: '202205112001'
},
{
relationship: 'ACTED_IN',
source: '330803',
target: '202205112002'
},
{
relationship: 'ACTED_IN',
source: '330825',
target: '202205110003'
},
{
relationship: 'ACTED_IN',
source: '330825',
target: '202205111004'
},
{
relationship: 'ACTED_IN',
source: '330825',
target: '202205112003'
},
{
relationship: 'ACTED_IN',
source: '330881',
target: '202205110003'
},
{
relationship: 'ACTED_IN',
source: '330881',
target: '202205112003'
},
{
relationship: 'ACTED_IN',
source: '330881',
target: '202205112004'
},
{
relationship: 'ACTED_IN',
source: '330822',
target: '202205110002'
},
{
relationship: 'ACTED_IN',
source: '330822',
target: '202205111002'
},
{
relationship: 'ACTED_IN',
source: '330824',
target: '202205111003'
},
{
relationship: 'ACTED_IN',
source: '330824',
target: '202205111004'
},
{
relationship: 'ACTED_IN',
source: '330824',
target: '202205112005'
},
{
relationship: 'ACTED_IN',
source: '330824',
target: '202205112006'
},
{
relationship: 'ACTED_IN',
source: '330824',
target: '202205112007'
}
]
}