Node节点

属性

大部分属性既可以在Node上设置, 也可以在GView上设置全局属性, 一般情况下, 全局属性名是由node_前缀加属性名组成, Node上属性的优先级高于GView上的全局属性

• typestringNode的形状类型, 默认为null

  有如下可选项:

  • image图标类型Node
  • path路径类型Node
  • shape形状类型Node
  • heatmap热力图类型Node

  如果没有明确设置type, 通过以下逻辑进行依次判断

  1. 如果设置了image属性, node显示为图标节点
  2. 如果设置了points属性, node显示为路径节点
  3. 如果以上属性都没有设置, node显示为形状节点

  一般不需要设置type属性, 通过属性进行逻辑判断即可

• x/ynumberNode左上角沿x轴/y轴的偏移位置, 默认为0

  x和y可以分别设置, 也可以通过setPosition/setCenter方法进行设置

                      
                          node.set("x", 100);
                          node.set("y", 200);
  
                          node.set({x: 100, y: 200});
  
                          node.setPosition(100, 200); //设置左上角坐标
                          node.setPosition({x: 100, y: 200});
  
                          node.setCenter(100, 100);   //设置中心坐标
                          node.setCenter({x: 100, y: 100});
                      
                  

• width/heightnumberNode的宽和高, 默认为32

  width和height可以分别设置, 也可以通过setSize方法进行设置

                      
                          node.set("width", 100);
                          node.set("height", 60);
  
                          node.set({width: 100, height: 60});
  
                          node.setSize(100, 60);
                          node.setSize({width: 100, height: 60});
                      
                  

• namestringNode的名字

  默认情况, 名字会显示为Label标签, 可以通过设置view的label_field属性指定Label标签的属性字段, 示例代码

                      
                          node.set("name", "Hello World!!");
                      
                  

• imagestringNode的图标

  可以通过URL指定图标路径, 图标可以是PNG/SVG/JPG等格式, 也可以使用Base64字符串

                      
                          // url svg
                          node.set("image", "../_icons/format/svg.svg");
                          // url png
                          node.set("image", "../_icons/format/png.png");
                          // base64
                          node.set("image", "data:image/svg+xml;base64,PHN2ZyB3aW...");
  
                          //Register and use by name.
                          // url
                          z.util.image.register("patent", "../_icons/paper/patent.svg");
                          // img
                          z.util.image.register("press", z.dom.query("#iconImg"));
                          // base64
                          z.util.image.register("book", "data:image/svg+xml;base64,PD94bWw...");
                          node.set("image", "patent"); // image name
                          node.set("image", "press");
                          node.set("image", "book");
                      
                  

• image_colorstringNode图标的渲染色

                      
                          node.set("image_color", "red");
                      
                  

  仅对image类型Node有效

• shapestringNode的形状, 默认显示为circle, 对应的GView全局属性是node_shape

  有如下可选项:

  • rect矩形
  • circle圆形
  • ellipse椭圆
  • roundrect圆角矩形
  • triangle三角形
  • right_triangle直角三角形
  • diamond菱形
  • pentagon五边形
  • hexagon六边形
  • star星形
  • parallelogram平行四边形
  • cloud云
  除了以上默认形状, 也可以通过z.canvas2d.registerShape添加自定义形状

                      
                          node.set("shape","start");
  
                          gView.set("node_shape","cloud"); // 全局设置
                      
                  

  仅对形状类型Node有效

• roundrect_radiusnumber | array圆角矩形形状Node的圆弧半径, 默认值为0.12, 对应的GView全局属性是node_roundrect_radius

  圆角矩形由4个角, 所以半径可以为数字, 也可以为数组

  • 数字 或 1个数字的数组所有的角相同的圆角半径, 示例) 10 / [20]
  • 2个数字的数组示例) [20,30]
    • 第0个数字表示左上角和右下角的圆角半径
    • 第1个数字表示右上角和左下角的圆角半径
  • 3个数字的数组示例)[20,30,40]
    • 第0个数字表示左上角的圆角半径
    • 第1个数字表示右上角和左下角的圆角半径
    • 第2个数字表示右下角的圆角半径
  • 4个数字的数组依次表示左上角、右上角、右下角、左下角的圆角半径, 示例)[20,30,40,50]

  请注意, 圆弧半径的长度不得大于width/2和height/2

  • 0 ≤ roundrect_radius < 1 表示相对于width和height的长度百分数
  • 1 ≤ roundrect_radius表示实际的半径大小

                      
                          node.set("roundrect_radius", 0.5);
  
                          gView.set("node_roundrect_radius", 20);//全局设置
                      
                  

  仅对圆角矩形形状的Node有效

• pointsarray路径Node的点集合

  默认两个点通过lineTo(直线)的方式相连, 可以通过点的seg属性设置到下一个点的连接方式, 有如下可选项

  • move_to到下一个点的连接方式为moveTo(移动)
  • line_to当前点和下一个点的连接方式为lineTo(直线), 当前点为线段的起点, 下一个点为线段的终点
  • quadratic_curve_to接下来的连接方式为quadraticCurveTo(二次贝塞尔曲线), 当前点为曲线的起点, 接下来的第一个点为二次曲线的控制点, 第二个点为曲线的终点
  • bezier_curve_to接下来的连接方式为bezierCurveTo(三次贝塞尔曲线), 当前点为曲线的起点, 接下来的第一, 第二个点为三次曲线的控制点, 第三个点为曲线的终点
  • closeclose, 接下来的连接方式为closePath(关闭路径), 会从当前点绘制一条到路径起点的直线

  请注意, 这里的seg指定的是当前点到下一个点的连接方式, 而不是当前点的

                      
                          //直线
                          node.set("points", [
                              {x: 100, y: 80},
                              {x: 300, y: 80}
                          ])；
                          //二次贝塞尔曲线
                          node.set("points", [
                              {x: 100, y: 340, seg: "quadratic_curve_to"},    //曲线起点
                              {x: 200, y: 260},   //控制点
                              {x: 300, y: 340}    //曲线终点
                          ]);
                          //三次贝塞尔曲线
                          node.set("points", [
                              {x: 400, y: 290, seg: "bezier_curve_to"},   //曲线起点
                              {x: 500, y: 260},   //第1个控制点
                              {x: 500, y: 360},   //第2个控制点
                              {x: 600, y: 330}    //曲线终点
                          ]);
                           //关闭
                          node.set("points", [
                              {x: 100, y: 100},
                              {x: 200, y: 200},
                              {x: 300, y: 300}    //关闭路径
                          ])；
                      
                  

  仅对路径类型Node有效

• rotationnumberNode的旋转角度

  旋转的中心点为节点body矩形的中心点, Node的body矩形区域不包括label标签和info提示等

                      
                          node.set("rotation", 180);
                      
                  

• hostNodeNode的宿主节点

  设置了host的节点称为follow节点, 会随着host节点的移动而移动

                      
                          node.set("host", hostNode);
                      
                  

填充样式(形状Node&路径Node)

填充相关样式设置, 请参考填充样式

• fillstringNode的填充样式, 默认值为#0175a2, 对应的GView全局属性是node_fill

  请参考填充和画笔样式#fill

                      
                          node.set("fill","LightSkyBlue");    //Name
                          node.set("fill","#008080");         //HEX
                          node.set("fill","rgb(105, 105, 105)");      //RGB
                          node.set("fill","rgba(154, 205, 50, 0.8)"); //RGBA
                          gView.set("node_fill","#008080");           //全局设置
  
                          node.set("fill","linear_gradient");
                          gView.set("node_fill","linear_gradient");   //全局设置
  
                          node.set("fill","radial_gradient");
                          gView.set("node_fill","radial_gradient");   //全局设置
  
                          node.set("fill","pattern");
                          gView.set("node_fill","pattern");           //全局设置
                      
                  

  仅对形状&路径类型Node有效

• fill_gradient_directionstring渐变填充的方向, 对应的GView全局属性是node_fill_gradient_direction

  请参考填充和画笔样式#fill_gradient_direction

                      
                          node.set("fill_gradient_direction","lt_to_rb");
  
                          gView.set("node_fill_gradient_direction","t_to_b"); // 全局设置
                      
                  

  仅对形状&路径类型Node有效

• fill_gradient_colorsobject渐变填充的梯度颜色对象, 指定起始位置向结束位置的渐变色, 对应的GView全局属性是node_fill_gradient_colors

  请参考填充和画笔样式#fill_gradient_colors

                      
                         node.set("fill_gradient_colors", {
                              0: "black",     //起始颜色为black
                              0.5: "red",     //中间50%位置的颜色为red
                              1: "white"      //结束颜色为white
                          });
  
                         gView.set("node_fill_gradient_colors", { //全局设置
                              0: "black",     //起始颜色为black
                              0.5: "red",     //中间50%位置的颜色为red
                              1: "white"      //结束颜色为white
                          });
                      
                  

  仅对形状&路径类型Node有效

• fill_pattern_imagestring|img纹理填充的图片, 对应的GView全局属性是node_fill_pattern_image

  属性值可以是注册的图片, 也可以是img对象, 请参考填充和画笔样式#fill_pattern_image

                      
                          node.set("fill_pattern_image", "windmill");
  
                          gView.set("node_fill_pattern_image", "windmill");    //全局设置
                      
                  

  仅对形状&路径类型Node有效

画笔样式(形状Node&路径Node)

画笔相关样式设置, 请参考画笔样式

• strokestring节点线条的画笔样式, 默认为#0175a2,对应的GView全局属性是node_stroke,

  请参考填充和画笔样式#stroke

                      
                          node.set("stroke","LightSkyBlue");    //Name
                          node.set("stroke","#008080");         //HEX
                          node.set("stroke","rgb(105, 105, 105)");      //RGB
                          node.set("stroke","rgba(154, 205, 50, 0.8)"); //RGBA
                          gView.set("node_stroke","#008080"); //全局设置
  
                          node.set("stroke","linear_gradient");
                          gView.set("node_stroke","linear_gradient");   //全局设置
  
                          node.set("stroke","radial_gradient");
                          gView.set("node_stroke","radial_gradient");   //全局设置
                      
                  

  仅对形状&路径类型Node有效

• stroke_gradient_directionstring画笔渐变样式的方向, 对应的GView全局属性是node_stroke_gradient_direction,

  请参考填充和画笔样式#stroke_gradient_direction

                      
                          node.set("stroke_gradient_direction","lt_to_rb");
  
                          gView.set("node_stroke_gradient_direction","t_to_b"); // 全局设置
                      
                  

  仅对形状&路径类型Node有效

• stroke_gradient_colorsobject画笔渐变样式的梯度颜色对象, 指定起始位置向结束位置的渐变色, 对应的GView全局属性是node_stroke_gradient_colors

  请参考填充和画笔样式#stroke_gradient_colors

                      
                         node.set("stroke_gradient_colors", {
                              0: "black",     //起始颜色为black
                              0.5: "red",     //中间50%位置的颜色为red
                              1: "white"      //结束颜色为white
                          });
  
                         gView.set("node_stroke_gradient_colors", {
                              0: "black",     //起始颜色为black
                              0.5: "red",     //中间50%位置的颜色为red
                              1: "white"      //结束颜色为white
                          });
                      
                  

  仅对形状&路径类型Node有效

• stroke_line_widthnumber画笔的线宽, 默认值为1, 对应的GView全局属性是node_stroke_line_width

  请参考填充和画笔样式#stroke_line_width

                      
                         node.set("stroke_line_width", 2);
  
                         gView.set("node_stroke_line_width", 2); //全局设置
                      
                  

  仅对形状&路径类型Node有效

• stroke_line_dasharray画笔的虚线模式参数, 对应的GView全局属性是node_stroke_line_dash

  请参考填充和画笔样式#stroke_line_dash

                      
                         node.set("stroke_line_dash", [6, 3]);
  
                         gView.set("node_stroke_line_dash", [3, 2]); //全局设置
                      
                  

  仅对形状&路径类型Node有效

• stroke_line_dash_offsetnumber画笔虚线的偏移量, 对应的GView全局属性是node_stroke_line_dash_offset

  请参考填充和画笔样式#stroke_line_dash_offset

                      
                         node.set("stroke_line_dash_offset", 10);
  
                         gView.set("node_stroke_line_dash_offset", 10); //全局设置
                      
                  

  仅对形状&路径类型Node有效

箭头样式(路径Node)

箭头相关样式设置, 请参考箭头样式文档

• begin_arrow_shape / end_arrow_shapestring路径节点起始/结束箭头的形状, 默认为null(不显示箭头), 对应的GView全局属性是node_begin_arrow_shape / end_arrow_shape,

  请参考箭头样式#arrow-shape

                      
                         node.set("begin_arrow_shape", "arrow");
                         node.set("end_arrow_shape", "stealth_arrow");
  
                         gView.set("node_begin_arrow_shape", "open_arrow");   //全局设置
                         gView.set("node_end_arrow_shape", "open_arrow");     //全局设置
                      
                  

  仅对路径类型Node有效

• begin_arrow_size / end_arrow_sizeinteger 路径节点起始/结束箭头的大小, 默认值为2, 对应的GView全局属性是node_begin_arrow_size / node_end_arrow_size

  请参考箭头样式#arrow-size

                      
                         node.set("begin_arrow_size", 3);
                         node.set("end_arrow_size", 6);
  
                         gView.set("node_begin_arrow_size", 8);   //全局设置
                         gView.set("node_end_arrow_size", 8);     //全局设置
                      
                  

  仅对路径类型Node有效

• begin_arrow_offset / end_arrow_offsetnumber 路径节点起始/结束箭头相对于起始点和结束点的偏移, 默认值为0(不偏移), 对应的GView全局属性是node_begin_arrow_offset / node_end_arrow_offset

  请参考箭头样式#arrow-offset

                      
                         node.set("begin_arrow_offset", 3);
                         node.set("end_arrow_size", 0.5); //50%
  
                         gView.set("node_begin_arrow_size", 8);   //全局设置
                         gView.set("node_end_arrow_size", 8);     //全局设置
                      
                  

  仅对路径类型Node有效

• begin_arrow_fill / end_arrow_fillstring路径节点开始/结束箭头的填充样式, 如果没有设置, 默认使用Node的stroke样式进行渲染, 对应的GView全局属性是node_begin_arrow_fill / node_end_arrow_fill

  请参考箭头样式#arrow-fill

                      
                          node.set("begin_arrow_fill","LightSkyBlue");    //Name
                          node.set("begin_arrow_fill","#008080");         //HEX
                          node.set("end_arrow_fill","rgb(105, 105, 105)");      //RGB
                          node.set("end_arrow_fill","rgba(154, 205, 50, 0.8)"); //RGBA
  
                          gView.set("node_begin_arrow_fill", "Green");    //全局设置
                          gView.set("node_end_arrow_fill", "Orange");     //全局设置
                      
                  

  仅对路径类型Node有效

• begin_arrow_stroke / end_arrow_strokestring路径节点开始/结束箭头边框线条的画笔样式, 如果没有设置并且是open_arrow类型的箭头, 默认使用图元的stroke样式进行渲染, 对应的GView全局属性是node_begin_arrow_stroke / node_end_arrow_stroke

  请参考箭头样式#arrow-stroke

                      
                          node.set("begin_arrow_stroke","LightSkyBlue");      //Name
                          node.set("end_arrow_stroke","#008080");             //HEX
  
                          gView.set("node_begin_arrow_stroke","rgb(105, 105, 105)");      //全局设置
                          gView.set("node_end_arrow_stroke","rgba(154, 205, 50, 0.8)");   //全局设置
                      
                  

  仅对路径类型Node有效

• begin_arrow_stroke_line_width / end_arrow_stroke_line_widthnumber箭头画笔的线宽, 如果没有设置并且是open_arrow类型的箭头, 默认使用图元的stroke_line_width样式进行渲染, 对应的GView全局属性是node_begin_arrow_stroke_line_width / node_end_arrow_stroke_line_width

  请参考箭头样式#arrow-stroke-line-width

                      
                          node.set("begin_arrow_stroke_line_width", 2);       //Name
                          node.set("end_arrow_stroke_line_width", 3);         //HEX
  
                          gView.set("node_begin_arrow_stroke_line_width", 2);     //全局设置
                          gView.set("node_end_arrow_stroke_line_width", 3);       //全局设置
                      
                  

文本样式

文本相关属性设置, 请参考文本样式

• label_positionstringLabel标签相对于节点body的位置, 默认为bottom

  有如下可选项

  • centerLabel标签位于节点body矩形的中心
  • topLabel标签位于节点body矩形的上侧
  • bottomLabel标签位于节点body矩形的下侧
  • leftLabel标签位于节点body矩形的左侧
  • rightLabel标签位于节点body矩形的右侧

                      
                          node.set("label_position", "center");
  
                          gView.set("label_position", "bottom");
                      
                  

• label_directionstringLabel标签相对于position位置点的方向, 默认为null

  有如下可选项

  • centerLabel标签位于位置点的中心
  • topLabel标签位于位置点的上侧
  • bottomLabel标签位于位置点的下侧
  • leftLabel标签位于位置点的左侧
  • rightLabel标签位于位置点的右侧
  • left_topLabel标签位于位置点的左上
  • left_bottomLabel标签位于位置点的左下
  • right_topLabel标签位于位置点的右上
  • right_bottomLabel标签位于位置点的右下

  如果没有指定label_direction, 会根据label_position自动生成label_direction方向

  • label_position = centerlabel_direction默认为center
  • label_position = toplabel_direction默认为top
  • label_position = bottomlabel_direction默认为bottom
  • label_position = leftlabel_direction默认为left
  • label_position = rightlabel_direction默认为right

                      
                          node.set("label_direction", "left");
  
                          gView.set("label_direction", "right");
                      
                  

• label_style*Label标签相关属性设置, 请参考填充和画笔样式#stroke
• info_style*Info提示相关属性设置, 请参考填充和画笔样式#stroke

外边框样式

如果设置了外边框的stroke相关属性, 外边框始终可见, 而选中状态边框只有选中时才可见

• outline_paddingnumber节点外边框的内边距, 默认值为2, 对应的GView全局属性是node_outline_padding

                      
                          node.set("outline_padding", 2);
  
                          gView.set("outline_padding", 3); //全局设置
                      
                  

• outline_strokestring节点外边框的画笔样式, 默认为null

  更多画笔样式, 请参考填充和画笔样式#stroke(通常设置为颜色)

                      
                          node.set("outline_stroke","LightSkyBlue");                    //颜色
  
                          node.set("outline_stroke", "linear_gradient");                //渐变类型
                          node.set("outline_stroke_gradient_direction", "lt_to_rb");    //渐变方向
                          node.set("outline_stroke_gradient_colors", {                  //渐变颜色
                              0: "black",     //起始颜色为black
                              0.5: "red",     //中间50%位置的颜色为red
                              1: "white"      //结束颜色为white
                          });
  
                          gView.set("outline_stroke","LightSkyBlue");   //全局设置
                      
                  

• outline_stroke_gradient_directionstring节点外边框画笔渐变绘制的颜色渐变方向

  渐变颜色由百分比位置(0-1)和颜色组成,请参考填充和画笔样式#stroke_gradient_direction

                      
                          node.set("outline_stroke_gradient_direction", "lt_to_rb");
  
                          gView.set("outline_stroke_gradient_direction", "lt_to_rb"); //全局设置
                      
                  

• outline_stroke_gradient_colorsstring节点外边框画笔渐变样式的梯度颜色对象

  渐变颜色由百分比位置(0-1)和颜色组成,请参考填充和画笔样式#stroke_gradient_colors

                      
                          node.set("outline_stroke_gradient_colors", {
                              0: "black",     //起始颜色为black
                              0.5: "red",     //中间50%位置的颜色为red
                              1: "white"      //结束颜色为white
                          });
                          gView.set("outline_stroke_gradient_colors", { //全局设置
                              0: "black",     //起始颜色为black
                              0.5: "red",     //中间50%位置的颜色为red
                              1: "white"      //结束颜色为white
                          });
                      
                  

• outline_stroke_line_widthnumber节点外边框画笔的线宽, 默认为1

  请参考填充和画笔样式#stroke_line_width

                      
                          node.set("outline_stroke_line_width", 2);
  
                          gView.set("outline_stroke_line_width", 2); //全局设置
                      
                  

• outline_stroke_line_dasharray节点外边框画笔的虚线模式参数,使用一组值来指定描述模式的线和间隙的交替长度, 默认为null

  请参考填充和画笔样式#stroke_line_dash

                      
                          node.set("outline_stroke_line_dash", [6, 3]);
  
                          gView.set("outline_stroke_line_dash", [6, 3]); //全局设置
                      
                  

• outline_stroke_line_dash_offsetnumber节点外边框画笔虚线的偏移, 默认为0

  请参考填充和画笔样式#stroke_line_dash_offset

                      
                          node.set("outline_stroke_line_dash_offset", 2);
  
                          gView.set("outline_stroke_line_dash_offset", 2); //全局设置
                      
                  

交互状态样式

交互相关属性设置, 请参考交互状态样式

• select_style*选中状态样式, 请参考选中状态
• hover_style*悬停状态样式, 请参考悬停状态/li>

控制/交互属性

节点上还包括一些控制(可见/可选/禁用/...)相关的属性, 这些控制属性既可以在节点上进行设置, 也可以通过在GView上设置全局控制属性、重写回调函数或添加过滤器(filter)的方式实现

• visibleboolean控制节点是否可见, 默认为true, 如果为false, 则节点在GView不可见

                      
                         node.set("visible", false);
                      
                  

• selectableboolean控制节点是否可选中, 默认为true, 如果为false, 则节点不可选中

                      
                         node.set("selectable", false);
  
                         gView.set("selectable", false); //全局设置
                      
                  

• hoverableboolean控制节点是否可悬停, 默认为false, 为提高效率, 只有Node的hoverable为true, 并且GView的hoverable为true时, 节点才可以悬停

                      
                         node.set("hoverable", true);
  
                         gView.set("hoverable", true); //全局设置
                      
                  

• movableboolean控制节点是否可拖动, 默认为true, 如果为false, 则节点不可拖动

                      
                         node.set("movable", false);
  
                         gView.set("movable", false); //全局设置
                      
                  

• disabledboolean控制节点是否禁用, 默认为false, 如果为true, 则节点不可交互

                      
                         node.set("disabled", true);
  
                         gView.set("disabled", true); //全局设置
                      
                  

方法

• setPosition(point)设置Node的位置(左上角), 参考x/y属性
  • pointobject | arrayNode的位置, 可以是对象/数组/分别传递

                      
                          node.setPosition({x: 100, y: 100}); //object
                          node.setPosition([100, 100]);       //array
                          node.setPosition(200, 200);         //x,y
                      
                  

• getPosition()获取Node的位置(左上角), 参考x/y属性
  • positionobjectNode的位置(左上角)

                      
                          node.getPosition(); //{x:100,y:100}
                      
                  

• setCenter(centerPoint)设置节点中心的位置
  • centerPointobject | array节点中心的位置, 可以是对象/数组/分别传递

                      
                          node.setCenter({x: 100, y: 100});   //object
                          node.setCenter([200, 200]);         //array
                          node.setCenter(200, 200);           //x,y
                      
                  

• getCenter()获取节点中心的位置, centerX = x + width/2, centerY = y + height/2
  • positionobject节点中心的位置

                      
                          node.getCenter(); //{x:100,y:100}
                      
                  

• setSize(size)设置Node的宽和高, 参考width/height属性
  • sizeobject | arrayNode的宽和高, 可以是对象/数组/分别传递

                      
                          node.setSize({width: 100, height: 100});    //object
                          node.setSize([100, 100]);                   //array
                          node.setSize(100, 100);                     //width,height
                      
                  

• getSize()获取节点宽和高, 参考width/height属性
  • sizeobjectNode的宽和高

                      
                          node.getSize(); //{width:100, height:100}
                      
                  

• getLinks()返回跟节点相关的所有链路列表
  • linksarray跟节点相关的所有链路
• getFromLinks()返回所有把当前节点作为fromNode的链路列表
  • fromLinksarray当前节点作为from节点的链路列表
• getToLinks()返回所有把当前节点作为toNode的链路列表
  • toLinksarray当前节点作为to节点的链路列表
• getLinksFrom(fromNode)返回指定节点作为from节点, 当前节点作为toNode的链路列表
  • fromNodeNode指定的作为from节点的对端节点
  • linksarray指定节点作为from节点, 当前节点作为to节点的链路列表
• getLinksTo(toNode)返回指定节点作为to节点, 当前节点作为fromNode的链路列表
  • toNodeNode指定的作为to节点的对端节点
  • linksarray指定节点作为to节点, 当前节点作为from节点的链路列表
• getLinksBetween(peerNode)返回指定节点和当前节点间的链路列表
  • peerNodeNode指定的对端节点
  • linksarray指定节点和当前节点间的链路列表