情景:由于人物关系复杂,可以有几个 ——几十个(上百个),所以固定范围内(如:500高度)可能放不下,或者太空。所以可以根据node节点(也可根据其他判断条件)来动态修改 div / canvas高度。如果还是超出(eg:节点或者关系多),可添加roam:true的属性实现可平移拖拽 / 缩放。(在下一节讲述)
效果如图:(图与下面配置的属性出来的效果不完全相符 ------- 因为配置会不定期更新)
(修改高度 )
数据:
// 数据
let data = {
nodes = [
// {symbol: 'image://http://127.0.0.1:8080/icon/littleMan_blue1.png'/ symbol: 'circle',symbolSize: 80, name: "李小璐", category: 0},
{
symbolSize: 80,
name: "李小璐",
category: 0
},
{
symbolSize: 60,
name: "贾乃亮",
category: 1
},
{
symbolSize: 40,
name: "王子文",
category: 2
},
{
symbolSize: 60,
name: "葛优",
category: 1
},
{
symbolSize: 40,
name: "陈飞宇",
category: 2
},
{
symbolSize: 60,
name: "乔任梁",
category: 1
},
{
symbolSize: 40,
name: "赵英博",
category: 2
},
{
symbolSize: 60,
name: "赵英俊",
category: 1
},
{
symbolSize: 40,
name: "张杰",
category: 2
},
{
symbolSize: 40,
name: "大鹏",
category: 2
},
{
symbolSize: 40,
name: "王源",
category: 2
},
{
symbolSize: 40,
name: "袁姗姗",
category: 2
},
{
symbolSize: 40,
name: "徐峥",
category: 2
},
{
symbolSize: 40,
name: "卢正雨",
category: 2
},
{
symbolSize: 40,
name: "董成鹏",
category: 2
},
{
symbolSize: 40,
name: "王宝强",
category: 2
},
{
symbolSize: 40,
name: "李宇春",
category: 2
},
{
symbolSize: 40,
name: "薛之谦",
category: 2
},
{
symbolSize: 40,
name: "陈思诚",
category: 2
},
{
symbolSize: 40,
name: "杨庆",
category: 2
},
{
symbolSize: 40,
name: "赵本山",
category: 2
},
{
symbolSize: 40,
name: "张靓颖",
category: 2
},
{
symbolSize: 40,
name: "包贝尔",
category: 2
},
{
symbolSize: 40,
name: "高超",
category: 2
},
{
symbolSize: 40,
name: "李荣浩",
category: 2
},
{
symbolSize: 40,
name: "张文",
category: 2
},
{
symb