antvis / X6

🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
https://x6.antv.antgroup.com
MIT License
5.63k stars 1.69k forks source link

jumpover经过相同路径时,出现异常跳线 #3828

Open 18663872803 opened 1 year ago

18663872803 commented 1 year ago

image

使用2.11.3版本中的example进行的测试,经过同一路径节点,出现了跳线。

是项目中应用发现的,想得到一个转折处(类丁字路口)平滑的效果,不出现跳线,如: image 但实际项目中出现了 image demo代码如下: ` const graph = new Graph({ container: this.container, width: 800, height: 1400, grid: 10, })

// Default connection of two elements.
// -----------------------------------

const r1 = graph.addNode({
  shape: 'rect',
  width: 70,
  height: 30,
  x: 200,
  y: 50,
  attrs: {
    body: { fill: '#1890ff', stroke: '#1890ff' },
    text: { text: 'box', fill: '#fff', magnet: true },
  },
})

var r2 = r1.clone()
graph.addNode(r2)
r2.translate(300)

graph.addEdge({
  source: r1,
  target: r2,
  label: 'default',
})

// Changing source and target selectors of the edge.
// -------------------------------------------------
var r3 = r1.clone()
graph.addNode(r3)
r3.translate(0, 80)

var r4 = r3.clone()
graph.addNode(r4)
r4.translate(300)

graph.addEdge({
  source: { cell: r3.id },
  target: { cell: r4.id, selector: 'text' },
  label: 'link to selector',
})

// Vertices.
// ---------
var r5 = r3.clone()
graph.addNode(r5)
r5.translate(0, 80)

var r6 = r5.clone()
graph.addNode(r6)
r6.translate(300)

graph.addEdge({
  source: r5,
  target: r6,
  vertices: [
    { x: 235, y: 280 },
    { x: 535, y: 280 },
  ],
  label: 'vertices',
})

// // Manhattan routing.
// // ------------------
var r7 = r5.clone()
graph.addNode(r7)
r7.translate(0, 100)

var r8 = r7.clone()
graph.addNode(r8)
r8.translate(200, 80)

graph.addEdge({
  source: r7,
  target: r8,
  vertices: [{ x: 620, y: 325 }],
  router: { name: 'metro' },
  label: 'metro router',
})
graph.addEdge({
  source: r7,
  target: r8,
  vertices: [{ x: 140, y: 405 },{ x: 140, y: 450 },{ x: 440, y: 450 }],
  router: { name: 'normal' },
  connector: { name: 'jumpover' }
})
graph.addEdge({
  source: r7,
  target: r8,
  vertices: [{ x: 140, y: 405 },{ x: 140, y: 450 },{ x: 240, y: 450 },{ x: 240, y: 400 }],
  router: { name: 'normal' },
  connector: { name: 'jumpover' }
})
graph.addEdge({
  source: r7,
  target: r8,
  vertices: [{ x: 140, y: 405 },{ x: 140, y: 450 },{ x: 160, y: 450 },{ x: 160, y: 500 },{ x: 180, y: 500 },{ x: 180, y: 500 }],
  router: { name: 'normal' },
  connector: { name: 'jumpover' }
})

`

Originally posted by @18663872803 in https://github.com/antvis/X6/issues/3149#issuecomment-1663738452

x6-bot[bot] commented 1 year ago

👋 @18663872803

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

NewByVector commented 1 year ago

这个效果应该不是问题,如果没有那个跳线的话,无法表现出连线走向。