度假区网站建设方案,网站建设公司专业公司排名,电脑微信怎么进入公众号,泰安seo网络公司antv/x6 自定义html节点 效果图定义一个连接桩公共方法注册图形节点创建html节点动态更新节点内容 效果图 定义一个连接桩公共方法
const ports {groups: {top: {position: top,attrs: {circle: {r: 4,magnet: true,stroke: #cf1322,strokeWidth: 1,fill: #fff,style: {visib… antv/x6 自定义html节点 效果图定义一个连接桩公共方法注册图形节点创建html节点动态更新节点内容 效果图 定义一个连接桩公共方法
const ports {groups: {top: {position: top,attrs: {circle: {r: 4,magnet: true,stroke: #cf1322,strokeWidth: 1,fill: #fff,style: {visibility: visible,},},},},right: {position: right,attrs: {circle: {r: 4,magnet: true,stroke: #389e0d,strokeWidth: 1,fill: #fff,style: {visibility: visible,},},},},bottom: {position: bottom,attrs: {circle: {r: 4,magnet: true,stroke: #389e0d,strokeWidth: 1,fill: #fff,style: {visibility: visible,},},},},left: {position: left,attrs: {circle: {r: 4,magnet: true,stroke: #cf1322,strokeWidth: 1,fill: #fff,style: {visibility: visible,},},},},},items: [{group: top,},{group: right,},{group: bottom,},{group: left,},],
}注册图形节点
Shape.HTML.register({shape: html,width: 70,height: 36,effect: [data],html(cell) {const { label, props } cell.getData()const div document.createElement(div)div.style.width 70const titleDiv document.createElement(div)titleDiv.style.width 70pxtitleDiv.style.height 36pxtitleDiv.style.background #eb2f96titleDiv.style.color whitetitleDiv.style.fontSize 14pxtitleDiv.style.textAlign centertitleDiv.style.lineHeight 36pxtitleDiv.style.boxSizing border-boxtitleDiv.style.fontSize 12pxtitleDiv.style.borderRadius 6pxtitleDiv.style.whiteSpace nowraptitleDiv.style.overflow hiddentitleDiv.style.textOverflow ellipsistitleDiv.setAttribute(title, label)titleDiv.textContent labeldiv.append(titleDiv)return div},ports: { ...ports,items: [{group: left},{group: right}]},})effect 是当前节点的 prop 数组当 effect 包含的 prop 有变动时会重新执行 html 方法返回新的 dom更新节点内容ports 是此节点的连接桩此节点只用到了左右两个连接桩
创建html节点
const r2 this.graph.createNode({shape: html,data: {props:{desc: },label: 自定义html,},
})shape 要和注册节点里的名称一致
动态更新节点内容
let cell this.graph.getCellById(id)
cell.prop(data/label, 文字)
cell.prop(data/props/voice, desc)id 是要更改内容的cell的id
