具有循环连接的层次树

Question

我正在尝试实现一个分层树（使用 React 和 JsPlumb），在节点之间使用循环连接并将两个节点连接成一个节点。问题是连接层次树的定位不能正常工作。实际上，循环连接与其他节点重叠。

我尝试使用 Bezier 连接器将结束节点连接到分层树中的开始节点，从结束节点的底部锚点到开始节点的顶部锚点，而不重叠节点。但是，树从结束节点的顶部锚点连接到起始节点的底部锚点并重叠节点。

配置：

const layoutConfig = {
  type: 'Hierarchical',
  parameters: {
    padding: [120, 150],
    spacing: 'compress',
    orientation: 'horizontal',
    magnetize: true,
  },
};
export const viewConfig = {
  nodes: {
    singleTrigger: { component: SingleTriggerComponent, events },
    action: { component: ActionComponent, events },
    delay: { component: DelayComponent, events },
    decision: { component: DecisionComponent, events },
    fork: { component: SplitComponent, events },
    fork_path: { component: LabelComponent, events },
    if: { component: LabelComponent, events },
    else: { component: LabelComponent, events },
    exit: { component: ExitComponent, events },
    placeholder: { component: PlaceholderComponent, events },
  },
  edges: {
    default: { paintStyle: { lineWidth: 2, strokeStyle: '#d9e3eb' } },
    bezier: simpleBezierEdgeConfig(),
    straight: straightEdgeConfig(),
    straightWithoutEndPoint: straightEdgeConfigWithoutEndPoint(),
  },
};
export const renderConfig = {
  layout: layoutConfig,
  refreshLayoutOnEdgeConnect: true,
  zoomToFit: false,
  zoomRange: [minZoom, maxZoom],
  consumeRightClick: false,
  elementsDraggable: false,
  enablePan: true,
  enableWheelZoom: false,
  enablePanButtons: false,
  jsPlumb: {
    Anchors: ['Bottom', 'Top'],
    Endpoints: ['Dot', 'Blank'],
  },
};

层级图：

"{"nodes":[{"id":"2813","type":"singleTrigger","data":{"workflow":[{"id":2813,"component_type":"root","parent_id":null,"properties":{},"active_people_count":0,"completed_people_count":1},{"id":2815,"component_type":"trigger","parent_id":null,"properties":{"campaign_id":575,"trigger_type":"unsubscribed_contact","display_values":{"campaign":{"id":575,"name":"Test for clicked link workflow","status":"live"}},"unsubscription_type":"campaign"},"active_people_count":0,"completed_people_count":1}]}},{"id":"2953","type":"action","data":{"id":2953,"component_type":"action","parent_id":2813,"properties":{"action_type":"move_from_one_campaign_to_another","parent_type":"root","display_values":{"to_campaign":{"id":572,"name":"Workflow test by me","status":"live"},"from_campaign":{"id":487,"name":"email 08(Copy) 1213 23","status":"live"}},"to_campaign_id":572,"from_campaign_id":487},"active_people_count":0,"completed_people_count":0}},{"id":"2952","type":"action","data":{"id":2952,"component_type":"action","parent_id":2953,"properties":{"action_type":"send_broadcast_mail","parent_type":"action","display_values":{"mail_filter":{"id":2517,"name":"Test ","status":"draft"}},"mail_filter_id":2517,"send_multiple_times":false},"active_people_count":0,"completed_people_count":0}},{"id":"2869","type":"action","data":{"id":2869,"component_type":"action","parent_id":2952,"properties":{"tag_id":1042,"action_type":"apply_tag","parent_type":"action","display_values":{"tag":{"id":1042,"name":"CSV Import - 2019-04-16 06:23:30 UTC","status":"present"}}},"active_people_count":0,"completed_people_count":0}},{"id":"2871","type":"fork","data":{"id":2871,"component_type":"fork","parent_id":2869,"properties":{"parent_type":"action"},"active_people_count":0,"completed_people_count":0}},{"id":"2872","type":"fork_path","data":{"id":2872,"component_type":"fork_path","parent_id":2871,"properties":{"position":1,"parent_type":"fork"},"active_people_count":0,"completed_people_count":0}},{"id":"2875","type":"decision","data":{"id":2875,"component_type":"decision","parent_id":2872,"properties":{"filters":[{"criteria":[{"key":"name","value":"test","condition":"contains","display_values":{}}]}],"parent_type":"fork_path","display_values":{}},"active_people_count":0,"completed_people_count":0}},{"id":"2876","type":"else","data":{"id":2876,"component_type":"else","parent_id":2875,"properties":{"parent_type":"decision"},"active_people_count":0,"completed_people_count":0}},{"id":"2870","type":"delay","data":{"id":2870,"component_type":"delay","parent_id":2876,"properties":{"delay_type":"timed_delay","parent_type":"else","interval_unit":"mins","interval_value":5,"processable_days":[0,1,2,3,4,5,6]},"active_people_count":0,"completed_people_count":0}},{"id":"2814","type":"exit","data":{"id":2814,"component_type":"exit","parent_id":2870,"properties":{"parent_type":"delay"},"active_people_count":0,"completed_people_count":1}},{"id":"2877","type":"if","data":{"id":2877,"component_type":"if","parent_id":2875,"properties":{"parent_type":"decision"},"active_people_count":0,"completed_people_count":0}},{"id":"2878","type":"exit","data":{"id":2878,"component_type":"exit","parent_id":2877,"properties":{"parent_type":"if"},"active_people_count":0,"completed_people_count":0}},{"id":"2873","type":"fork_path","data":{"id":2873,"component_type":"fork_path","parent_id":2871,"properties":{"position":2,"parent_type":"fork"},"active_people_count":0,"completed_people_count":0}},{"id":"2874","type":"exit","data":{"id":2874,"component_type":"exit","parent_id":2873,"properties":{"parent_type":"fork_path"},"active_people_count":0,"completed_people_count":0}}],"edges":[{"source":"2813","target":"2953","data":{"type":"straight","id":2953,"component_type":"action","parent_id":2813,"properties":{"action_type":"move_from_one_campaign_to_another","parent_type":"root","display_values":{"to_campaign":{"id":572,"name":"Workflow test by me","status":"live"},"from_campaign":{"id":487,"name":"email 08(Copy) 1213 23","status":"live"}},"to_campaign_id":572,"from_campaign_id":487},"active_people_count":0,"completed_people_count":0}},{"source":"2953","target":"2952","data":{"type":"straight","id":2952,"component_type":"action","parent_id":2953,"properties":{"action_type":"send_broadcast_mail","parent_type":"action","display_values":{"mail_filter":{"id":2517,"name":"Test ","status":"draft"}},"mail_filter_id":2517,"send_multiple_times":false},"active_people_count":0,"completed_people_count":0}},{"source":"2952","target":"2869","data":{"type":"straight","id":2869,"component_type":"action","parent_id":2952,"properties":{"tag_id":1042,"action_type":"apply_tag","parent_type":"action","display_values":{"tag":{"id":1042,"name":"CSV Import - 2019-04-16 06:23:30 UTC","status":"present"}}},"active_people_count":0,"completed_people_count":0}},{"source":"2869","target":"2871","data":{"type":"straight","id":2871,"component_type":"fork","parent_id":2869,"properties":{"parent_type":"action"},"active_people_count":0,"completed_people_count":0}},{"source":"2871","target":"2872","data":{"type":"bezier","id":2872,"component_type":"fork_path","parent_id":2871,"properties":{"position":1,"parent_type":"fork"},"active_people_count":0,"completed_people_count":0}},{"source":"2871","target":"2873","data":{"type":"bezier","id":2873,"component_type":"fork_path","parent_id":2871,"properties":{"position":2,"parent_type":"fork"},"active_people_count":0,"completed_people_count":0}},{"source":"2872","target":"2875","data":{"type":"straightWithoutEndPoint","id":2875,"component_type":"decision","parent_id":2872,"properties":{"filters":[{"criteria":[{"key":"name","value":"test","condition":"contains","display_values":{}}]}],"parent_type":"fork_path","display_values":{}},"active_people_count":0,"completed_people_count":0}},{"source":"2875","target":"2876","data":{"type":"bezier","id":2876,"component_type":"else","parent_id":2875,"properties":{"parent_type":"decision"},"active_people_count":0,"completed_people_count":0}},{"source":"2875","target":"2877","data":{"type":"bezier","id":2877,"component_type":"if","parent_id":2875,"properties":{"parent_type":"decision"},"active_people_count":0,"completed_people_count":0}},{"source":"2876","target":"2870","data":{"type":"straightWithoutEndPoint","id":2870,"component_type":"delay","parent_id":2876,"properties":{"delay_type":"timed_delay","parent_type":"else","interval_unit":"mins","interval_value":5,"processable_days":[0,1,2,3,4,5,6]},"active_people_count":0,"completed_people_count":0}},{"source":"2870","target":"2814","data":{"type":"straight","id":2814,"component_type":"exit","parent_id":2870,"properties":{"parent_type":"delay"},"active_people_count":0,"completed_people_count":1}},{"source":"2877","target":"2878","data":{"type":"straightWithoutEndPoint","id":2878,"component_type":"exit","parent_id":2877,"properties":{"parent_type":"if"},"active_people_count":0,"completed_people_count":0}},{"source":"2873","target":"2874","data":{"type":"straightWithoutEndPoint","id":2874,"component_type":"exit","parent_id":2873,"properties":{"parent_type":"fork_path"},"active_people_count":0,"completed_people_count":0}}],"ports":[],"groups":[]}"

函数：

toolkit.addEdge({source: '2813', target: '2874'});

我希望结束节点从底部连接到弯曲边缘而不重叠节点。

Answer 1

如果我们使用 toolkit.addEdge({source, target}) 方法在分层树布局中建立连接，分层树中存在的节点会错位并且树看起来不美观。因此，jsPlumb 支持另一种称为 jsPlumb.connect({source, target}) 的方法来建立 inter-node 连接。此连接不被视为边缘。所以，解决方案是使用

函数：

jsPlumb.connect({source: '2813', target: '2874'});

注意：为避免重叠，我们需要使用 FlowChat 连接器。

具有循环连接的层次树

Hierarchical tree with loop connection

jsplumb

reactjs