用户常见问题收集

[bubkoo]

收集用户的常见问题和回答，沉淀到文档的常见问题章节中。

抛个砖

• 如何定制节点和节点样式？
• 如何限制节点移动等交互？

[bubkoo]

整理常见问题后，可以尝试配置钉钉的自动答疑机器人。

[jave-joe]

x6-app-dag 什么时候搞一版vue的出来呢

[daigang666]

如何实现节点和边的名字编辑，以及监听此种事件，希望能推出一个实例

[NewByVector]

如何实现节点和边的名字编辑，以及监听此种事件，希望能推出一个实例

提上日程了

[KunerRick]

请问 Addon.Stencil 的onSearch 该如何使用呢，我看没有相应的接口说明，文档是还在完善么？

[bubkoo]

请问 Addon.Stencil 的onSearch 该如何使用呢，我看没有相应的接口说明，文档是还在完善么？

@NewByVector 补充一下使用文档。

[NewByVector]

请问 Addon.Stencil 的onSearch 该如何使用呢，我看没有相应的接口说明，文档是还在完善么？

已经添加，https://x6.antv.vision/zh/docs/tutorial/basic/dnd#step-1-%E5%88%9D%E5%A7%8B%E5%8C%96-1

[NewByVector]

请问什么时候可以提供一个原生js或jquery的流程图Demo？是不是没有此计划？没有的话我继续用jsplumb了。

暂时没有

[pipipi-pikachu]

如何方便的添加edge的高亮状态，如选中时、hover时。希望这种高亮状态时无关数据的，否则像现在这样通过监听事件修改样式来高亮会引出很多问题，例如要解决与编辑样式的冲突、保存时要进行额外处理，等

[yumenglong]

x6 没有提供保存方法吗？像G6的 gragh.save()方法一样

[yh123456yh]

流程图的起始节点，流程节点，链接节点都可以编辑，为什么判断节点无法编辑

[east119]

怎么控制节点和边的cursor？
目前节点cursor: move，边path的cursor: pointer
节点都禁止移动了，鼠标放上去还显示移动样式。

[NewByVector]

怎么控制节点和边的cursor？
目前节点cursor: move，边path的cursor: pointer
节点都禁止移动了，鼠标放上去还显示移动样式。

在 v1.11.1 上修复了该问题

[NewByVector]

流程图的起始节点，流程节点，链接节点都可以编辑，为什么判断节点无法编辑

判断节点也是可以编辑的

[NewByVector]

如何方便的添加edge的高亮状态，如选中时、hover时。希望这种高亮状态时无关数据的，否则像现在这样通过监听事件修改样式来高亮会引出很多问题，例如要解决与编辑样式的冲突、保存时要进行额外处理，等

选中可以参照 https://x6.antv.vision/zh/docs/tutorial/basic/selection#%E6%A0%B7%E5%BC%8F%E5%AE%9A%E5%88%B6 定制样式，简单的 hover 的样式可以用css来实现

[NewByVector]

x6 没有提供保存方法吗？像G6的 gragh.save()方法一样

https://x6.antv.vision/zh/docs/tutorial/basic/graph

[Doifo]

为什么在引入x6时需要手动添加@types/jquery-mousewheel和@types/jquery引用，否则typescript会提示错误。x6不是本身有这两个引用吗？

[NewByVector]

为什么在引入x6时需要手动添加@types/jquery-mousewheel和@types/jquery引用，否则typescript会提示错误。x6不是本身有这两个引用吗？

JQuery 定义已经内置到 TS 中了，是不是你 TS 版本过低？

[Doifo]

Ts版本是4.0.2，应该已经很新了。另外我是在angular项目中引入x6的，你可以试一下

…

---原始邮件--- 发件人: "vector"<[email protected]&gt; 发送时间: 2021年1月21日(周四) 上午9:56 收件人: "antvis/X6"<[email protected]&gt;; 抄送: "Doifo"<[email protected]&gt;;"Comment"<[email protected]&gt;; 主题: Re: [antvis/X6] 用户常见问题收集 (#332) 为什么在引入x6时需要手动添加@types/jquery-mousewheel和@types/jquery引用，否则typescript会提示错误。x6不是本身有这两个引用吗？ JQuery 定义已经内置到 TS 中了，是不是你 TS 版本过低？ — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[Doifo]

使用鼠标滚轮缩放，chrome会报错Unable to preventDefault inside passive event listener invocation.

[TigerWFH]

请问，手动连接port时，生成的edge，如何修改其默认值？

在新建画布实例是，设置options.connecting.createEdge，返回默认变实例就可以。见下图

[FelicityGao]

请问，我如果想给禁止移动的节点定制样式应该怎么做？

[BarneyRoos]

亲，你的信我已收到，真希望尽快看到它！

[xyhxyw]

@zengpinru 一般处理方式是组织事件冒泡

已经解决了，X6 中的 node:click 事件不是通过 click 事件触发的，而是通过 mouseup 事件来触发的；阻止 mouseup 事件冒泡就 ok。

应该是在mousedown中，通过阻止冒泡，来阻止mouseup事件的触发吧？

[bigbigbo]

请问这个场景，如何实现呢？

场景：右键节点，并在出现的右键菜单中点击选项“创建边”，期望效果是跟从连接桩中拉出一条线一样的效果。

[BarneyRoos]

亲，你的信我已收到，真希望尽快看到它！

[NiCools]

表格以及表格行点击连线有什么好的方案嘛。我能想到用类似er图做，node上还得要有其他的组件，比如搜索框等。有没有其他方案呢

[komagic]

x6 手动触发渲染是哪个api，update好像没了

[tymagic]

如何定制节点和节点样式

[Jerryxierui]

怎么给node节点绑定右键菜单事件

[JobbyM]

Readme里面已经贴了第三个群的二维码。

@NewByVector 第三个群也满了，还有更多群吗？

[qq919006380]

Readme里面已经贴了第三个群的二维码。The Readme has already posted the QR code for the third group.

@NewByVector 第三个群也满了，还有更多群吗？

@ NewByVector the third group is full. Are there more groups?

Readme里面已经贴了第三个群的二维码。The Readme has already posted the QR code for the third group.

@NewByVector 第三个群也满了，还有更多群吗？

@ NewByVector the third group is full. Are there more groups?

我开了一个qq群 686327125 仅做x6交流

[ricarduuu]

节点克隆的时候，使用了 cell.clone({deep: true})，但是克隆后的数据结构，没有parent children 这样的父子关系，

以前的children被保存在

_children里面，_children是一个protcted属性不好访问，

我想实现，克隆一个节点及其子节点，并移动到 一个已知节点下面去

[chengwenxin]

场景：拖动节点到达边上的时候，可以直接连接该节点。类似：1 -------> 2 ， 拖过来一个 3 到边上后变成：1 ----> 3 ----> 2 期望：是否可以提供节点（边）拖动到其他节点（边）上面时的事件

@NewByVector 辛苦帮忙看一下这个是否能支持~
请问这个功能有进展吗

[Mr-Nobody-li]

如何为data定义类型，源码的类型推断不太看得懂，不知道要怎么通过泛型定义，可以举个例子吗？

[IcarusRyy]

如何框选多个子节点一起拖入到组成为子节点？

[zmcode]

这是来自QQ邮箱的假期自动回复邮件。   你好，我最近正在休假中，无法亲自回复你的邮件。我将在假期结束后，尽快给你回复。

[2193531059]

你好，项目中有几个rect节点，通过连接桩port连线， 会有连线贴着节点边的问题，请问这个怎么优化？下面我贴下连线相关的代码：
`// 创建Graph的时候的配置
connecting: {
snap:true, // 是否自动吸附节点的连接桩
allowNode: (options) => {
// 定义哪些节点允许连线
console.log('connecting allowNode =====> options: ', options)
return true;
},
// 连接点 ConnectionPoint 与锚点 Anchor 共同确定了边的起点或终点。
connectionPoint: {
name:'anchor',
args: {
sticky:true,
}
},
anchor: {
name: "center",
args: {
dx: 10,
},
},
// 定义连线的路由样式
router: {
name: 'manhattan',
args: {
step: 20,
}
},
// 定义连线的弯折点样式
connector: {
name: 'rounded',
args: {
radius: 8,
},
},
allowBlank: false,
allowEdge: false,
allowLoop: false,
allowMulti: false,

  validateEdge({ edge }) {
    console.log('connecting validateEdge =====> edge: ', edge)
    // 校验连线
    return true
  },
},

// 创建几个普通的rect节点
baseAddNode() {
// 使用构造方式创建节点
const rect1 = new Shape.Rect({
x: 100,
y: 200,
width: 80,
height: 40,
attrs: {
body: {
fill: 'white',
},
label: {
text: 'rect1',
fill: 'black',
},
},
ports,
})
this.graph.addNode(rect1)

  const rect2 = new Shape.Rect()
  rect2
      // 设置节点位置
      .position(200, 250)
      // 设置节点大小
      .resize(80, 40)
      // 设置节点样式
      .attr({
        body: {
          fill: 'white',
        },
        label: {
          text: 'rect2',
          fill: 'black',
        },
      })
  this.graph.addNode(rect2)

  this.graph.addNode({
    shape: 'rect', // 指定使用何种图形，默认值为 'rect'
    x: 350,
    y: 300,
    width: 80,
    height: 40,
    attrs: {
      body: {
        fill: 'white',
      },
      label: {
        text: 'rect3',
        fill: 'black',
      },
    },
    ports,
  })
},`

[2193531059]

你好，项目中有几个rect节点，通过连接桩port连线， 会有连线贴着节点边的问题，请问这个怎么优化？下面我贴下连线相关的代码：
`// 创建Graph的时候的配置
connecting: {
snap:true, // 是否自动吸附节点的连接桩
allowNode: (options) => {
// 定义哪些节点允许连线
console.log('connecting allowNode =====> options: ', options)
return true;
},
// 连接点 ConnectionPoint 与锚点 Anchor 共同确定了边的起点或终点。
connectionPoint: {
name:'anchor',
args: {
sticky:true,
}
},
anchor: {
name: "center",
args: {
dx: 10,
},
},
// 定义连线的路由样式
router: {
name: 'manhattan',
args: {
step: 20,
}
},
// 定义连线的弯折点样式
connector: {
name: 'rounded',
args: {
radius: 8,
},
},
allowBlank: false,
allowEdge: false,
allowLoop: false,
allowMulti: false,

  validateEdge({ edge }) {
    console.log('connecting validateEdge =====> edge: ', edge)
    // 校验连线
    return true
  },
},

// 创建几个普通的rect节点
baseAddNode() {
// 使用构造方式创建节点
const rect1 = new Shape.Rect({
x: 100,
y: 200,
width: 80,
height: 40,
attrs: {
body: {
fill: 'white',
},
label: {
text: 'rect1',
fill: 'black',
},
},
ports,
})
this.graph.addNode(rect1)

  const rect2 = new Shape.Rect()
  rect2
      // 设置节点位置
      .position(200, 250)
      // 设置节点大小
      .resize(80, 40)
      // 设置节点样式
      .attr({
        body: {
          fill: 'white',
        },
        label: {
          text: 'rect2',
          fill: 'black',
        },
      })
  this.graph.addNode(rect2)

  this.graph.addNode({
    shape: 'rect', // 指定使用何种图形，默认值为 'rect'
    x: 350,
    y: 300,
    width: 80,
    height: 40,
    attrs: {
      body: {
        fill: 'white',
      },
      label: {
        text: 'rect3',
        fill: 'black',
      },
    },
    ports,
  })
},`

[bighhhh]

readOnly

画布非编辑模式有方法吗？

[999999999999mail]

折叠群组时，当群组内的节点和群组外的节点有连线（边）可以不隐藏这个连线（边）吗？查看了文档，没有找到相关的方法。

[zmcode]

这是来自QQ邮箱的假期自动回复邮件。   你好，我最近正在休假中，无法亲自回复你的邮件。我将在假期结束后，尽快给你回复。

[999999999999mail]

创建边的时候添加edge-editor工具，在edge:mouseenter事件时添加 target-arrowhead工具 ,在edge:mouseleave事件时移除 target-arrowhead 工具。编辑边的标签内容后，数据无法保存，是不是removeTool导致边的所有工具重绘了，没法保存数据？

[zzzhanga]

创建边的时候添加edge-editor工具，在edge:mouseenter事件时添加 target-arrowhead工具 ,在edge:mouseleave事件时移除 target-arrowhead 工具。编辑边的标签内容后，数据无法保存，是不是removeTool导致边的所有工具重绘了，没法保存数据？

是的，我也遇到了这个问题。还有一个问题，edge-editor能否限制一条边只能添加一个。请问你们解决了吗

[jc-anguiano]

你好，

首先，我想对你们在x6库上的出色工作表示感谢，我对这个库的质量和功能非常印象深刻。我有一个关于渲染方法定制的问题，特别是我想了解是否可以像G6库那样，使用rough.js来实现图形的手绘风格渲染。请问x6支持这样的个性化渲染方式吗？如果可以，能否提供一些指导或示例代码说明如何集成rough.js？

我本人不会说中文，这个问题是通过自动翻译工具转达的，如果有任何表达不清楚的地方，请见谅。

谢谢你们的时间和帮助！

[zmcode]

这是来自QQ邮箱的假期自动回复邮件。   你好，我最近正在休假中，无法亲自回复你的邮件。我将在假期结束后，尽快给你回复。

[GemmaYin]

因为我的线 标签只能有一个，所以我做了这个配置。但是当我想点击去编辑标签的时候，会不小心双击到线，这时候这个布局会有问题

[BarneyRoos]

亲，你的信我已收到，真希望尽快看到它！

[ppmmwozuiai]

请教两个问题：
1.如何禁止一个元素被拖拽入一个分组？
2.如何控制元素之间的最小间距？