Go.js-如何强制链接不要进行不必要的中断

问题描述

我正在使用go.js库编写一个图表构建应用程序。该图具有简单的结构，并使用布局go.layeredDigraphLayout。每个块代表一个公司。如果一个块（A）连接到另一个块（B），则意味着公司A由公司B拥有。

Diagram Sample

现在一切都很好，但当块标题较长时，它可能会导致一些链接中断：

Issue sample

上面的

^显示了该图将如何自动呈现。可以在周围拖动块以获得更理想的外观：

Desired look

我已经搜索了一段时间，但实际上找不到能够使图“扩展”为直的连接腾出空间的属性。换句话说，我希望生成该图，其主要重点是防止创建链接断点。

以下是我用于图表的属性：

  myDiagram =
$(go.Diagram,"diagram",{
    "animationManager.initialAnimationStyle": go.AnimationManager.None,"InitialAnimationStarting": function (e) {
      var animation = e.subject.defaultAnimation;
      animation.easing = go.Animation.EaSEOutExpo;
      animation.duration = 900;
      animation.add(e.diagram,'scale',0.1,0.51);
      animation.add(e.diagram,'opacity',1);
    },layout: $(go.layeredDigraphLayout,{
      direction: 270,layerSpacing: 125,setsPortSpots: false,aggressiveOption: go.layeredDigraphLayout.AggressiveMore,packOption: 3
    }),initialAutoScale: go.Diagram.UniformToFill,"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,"clickCreatingTool.archetypeNodeData": { text: "new node",ribbon: "UnkNown" },"undoManager.isEnabled": true,positioncomputation: function (myDiagram,pt) {
      return new go.Point(Math.floor(pt.x),Math.floor(pt.y));
    },"grid.background": "red",});

链接模板：

  myDiagram.linkTemplate =
$(go.Link,{
    curve: go.Link.Orthogonal,routing: go.Link.AvoidsNodes,adjusting: go.Link.Stretch,reshapable: true,relinkableFrom: true,relinkableto: true,toShortLength: 3,resegmentable: true,corner: 10,},new go.Binding("points").makeTwoWay(),new go.Binding("curviness"),$(go.Shape,// the link shape
    { strokeWidth: 1,stroke: "#444444" },new go.Binding('stroke','progress',function (progress) {
      return progress ? "green" /* green */ : '#444444';
    }),new go.Binding('strokeWidth',function (progress) {
      return progress ? 2.5 : 1.5;
    })
  ),// the arrowhead
    { toArrow: "Feather",new go.Binding('fill',),$(go.Panel,"Auto",{
      segmentIndex: 1,segmentFraction: 0.5
    },{
        fill: "#1E1E1E",stroke: null,}),$(go.TextBlock,"0",{
        textAlign: "center",font: "9pt helvetica,arial,sans-serif",margin: 4,stroke: "#444444",background: null,editable: true  // enable in-place editing
      },new go.Binding("text").makeTwoWay())
  )
);

也许有人知道实现我目标的方法？在这一点上，我认为我没有使用经典的TreeLayout搞砸了，因为go.layeredDigraphLayout似乎没有节点间距/填充选项。我在链接模板中尝试了“拐角”，“路由”，“调整”，以及“ packOption”，“ layerSpacing”，但没有什么可以使图呈现更好。

我将在16小时内准备好Codepen，但是如果有人知道我的查询的明显答案，将非常感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

diagram gojs graph javascript