logoCreated with Sketch.

F6

Triangle

阅读时间约 4 分钟

Triangle

F6 内置了三角形  Triangle 节点，其默认样式如下。标签文本位于三角形下方。
img

使用方法

如 内置节点 一节所示，配置节点的方式有三种：实例化图时全局配置，在数据中动态配置，使用 graph.node(nodeFn) 函数配置。这几种配置方法可以同时使用，优先级：

使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置

⚠️ 注意: 除 id、label 应当配置到每个节点数据中外，其余的 节点的通用属性 以及各个节点类型的特有属性（见内置节点类型）均支持这三种配置方式。

1 实例化图时全局配置

用户在实例化 Graph 时候可以通过 defaultNode 指定 type 为 'triangle'，即可使用 triangle 节点。

const graph = new F6.Graph({
  ...
  width: 800,
  height: 600,
  defaultNode: {
    type: 'triangle',
    // 其他配置
  },
});

2 在数据中动态配置

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

const data = {
  nodes: [{
	  id: 'node0',
    type: 'triangle',
    ... // 其他配置
    },
    ... // 其他节点
  ],
  edges: [
    ... // 边
  ]
}

配置项说明

triangle 节点支持 节点通用配置，下表对部分属性进行解释：

名称含义类型备注
size三角形的边长NumberArraysize 为数组时取第一个值
direction三角形的方向String可取值：'up'，'down'，'left'，'right'。默认为 'up'
style三角形默认样式ObjectCanvas 支持的属性
label标签文本内容String
labelCfg标签文本配置项Object
stateStyles各状态下的样式Object详见配置状态样式
linkPoints视觉上的三个锚点Object默认不显示，应与 anchorPoints 配合使用。二者区别请看 linkPoints
icon三角形上 icon 配置Object默认不显示 icon

三角形方向 direction

String 类型。可取值有：'``up'、'down'、'left'、'right'。默认为  '``up'。通过设置 direction，可以修改三角形的方向。下面代码演示在实例化图时全局配置方法中配置 direction。

const graph = new F6.Graph({
  ...
  width: 800,
  height: 600,
  defaultNode: {
    type: 'triangle',
    direction: 'down',
  },
});
img img img img

上图分别是将 direction 配置为 'up'，'down'，'left'，'right' 的结果

样式属性 style

Object 类型。支持 节点通用样式。通过 style 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style，使之达到如下图效果。
img

const data = {
  nodes: [
    {
      x: 100,
      y: 100,
      type: 'triangle',
      label: 'triangle',
    },
  ],
};
const graph = new F6.Graph({
  ...
  width: 800,
  height: 600,
  defaultNode: {
    // type: 'triangle', // 在数据中已经指定 type，这里无需再次指定
    direction: 'up',
    size: 100,
    style: {
      fill: '#bae637',
      stroke: '#eaff8f',
      lineWidth: 5,
    },
  },
});
graph.data(data);
graph.render();

标签文本配置 labelCfg

Object 类型。通过 labelCfg 配置标签文本。支持 节点通用标签配置。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了  labelCfg  配置项进行文本的配置，使之达到如下图效果。
img

const data = {
  // ... data 内容
};
const graph = new F6.Graph({
  // ... 图的其他属性
  defaultNode: {
    // ... 节点其他属性
    labelCfg: {
      position: 'center',
      style: {
        fill: '#9254de',
        fontSize: 18,
      },
    },
  },
});
// ...

 linkPoints Object 类型。通过配置 linkPoints ，可以指定节点上「上、左、右」三个小圆点。

⚠️ 注意: 区分于 anchorPoints： anchorPoints 是真正用于指定该节点相关边的连入位置的「数组」，见 anchorPoints；而 linkPoints 仅是指定是否「绘制」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。
名称含义类型备注
top是否显示上部的圆点Boolean默认为 false
left是否显示左侧的圆点Boolean默认为 false
right是否显示右侧的圆点Boolean默认为 false
size圆点的大小Number默认为 3
fill圆点的填充色String默认为 '#72CC4A'
stroke圆点的边框颜色String默认为 '#72CC4A'
lineWidth圆点边框的宽度Number默认为 1

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了  linkPoints  配置项进行连入点的配置，使之达到如下图效果。
img

const data = {
  // ... data 内容
};
const graph = new F6.Graph({
  // ... 图的其他属性
  defaultNode: {
    // ... 其他属性
    linkPoints: {
      top: true,
      bottom: true,
      left: true,
      right: true,
      fill: '#fff',
      size: 5,
    },
  },
});
// ...

图标  icon

Object 类型。通过配置 icon，可以在圆上显示小图标。

名称含义类型备注
show是否显示 iconBoolean默认为 false，不显示
widthicon 的宽度Number默认为 16
heighticon 的高度Number默认为 16
imgicon 的地址或 base64String若配置则表示使用 iconfont 作为 icon
texticon 的 iconfontString若配置则表示使用 iconfont 作为 icon
offseticon 的偏移量Number默认为 0，triangle 节点的 icon 特有的配置

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 icon  配置项进行图标的配置，使之达到如下图效果。
img

const data = {
  // ... data 内容
};
const graph = new F6.Graph({
  // ... 图的其他属性
  defaultNode: {
    // ... 其他属性
    icon: {
      show: true,
      width: 30,
      height: 30,
      offset: 20,
      // img: '...', 可更换为其他图片地址
      // text: '...', 使用 iconfont
    },
  },
});
// ...