如何在父节点之间创建出租车边缘？

问题描述 投票：1回答：2

我正在尝试使用'curve-style': 'taxi'在两个父节点之间创建边缘。不幸的是，父节点之间的边缘似乎没有成直角，并且通常非常不规律地路由自己。

window.addEventListener('DOMContentLoaded', function() { // on dom ready

  // photos from flickr with creative commons license

  var cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
      .selector('node')
      .style({
        'height': 80,
        'width': 80,
        'background-fit': 'cover',
        'border-color': '#000',
        'border-width': 3,
        'border-opacity': 0.5
      })
      .selector('.eating')
      .style({
        'border-color': 'red'
      })
      .selector('.eater')
      .style({
        'border-width': 9
      })
      .selector('edge')
      .style({
        'width': 6,
        'target-arrow-shape': 'triangle',
        'line-color': '#ffaaaa',
        'target-arrow-color': '#ffaaaa',
        'curve-style': 'taxi'
      })
      .selector('#bird')
      .style({
        'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
      })
      .selector('#cat')
      .style({
        'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
      })
      .selector('#ladybug')
      .style({
        'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
      })
      .selector('#aphid')
      .style({
        'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
      })
      .selector('#rose')
      .style({
        'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
      })
      .selector('#grasshopper')
      .style({
        'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
      })
      .selector('#plant')
      .style({
        'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
      })
      .selector('#wheat')
      .style({
        'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
      }),

    elements: {
      nodes: [{
          data: {
            id: 'cat',
            parent: 'bird'
          }
        },
        {
          data: {
            id: 'bird'
          }
        },
        {
          data: {
            id: 'ladybug'
          }
        },
        {
          data: {
            id: 'aphid'
          }
        },
        {
          data: {
            id: 'rose'
          }
        },
        {
          data: {
            id: 'grasshopper'
          }
        },
        {
          data: {
            id: 'plant'
          }
        },
        {
          data: {
            id: 'wheat'
          }
        }
      ],
      edges: [{
          data: {
            source: 'cat',
            target: 'bird'
          }
        },
        {
          data: {
            source: 'bird',
            target: 'ladybug'
          }
        },
        {
          data: {
            source: 'bird',
            target: 'grasshopper'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'plant'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'wheat'
          }
        },
        {
          data: {
            source: 'ladybug',
            target: 'aphid'
          }
        },
        {
          data: {
            source: 'aphid',
            target: 'rose'
          }
        }
      ]
    },

    layout: {
      name: 'breadthfirst',
      directed: true
    }
  }); // cy init


}); // on dom ready
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet" />
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <title>Images</title>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

有没有办法让出租车边缘的行为与他们在非父节点之间的行为方式相同？

cytoscape.js
2个回答
0
投票

这是由breadthfirst layout中的weired布局行为引起的。当在广度上使用复合节点时，似乎布局不能很好地处理内部节点，因此外边缘不是真正的bfs边缘（绑定在一起），而是两个单独的bfs边缘（不是绑定）。为了让'curve-style': 'taxi'工作，我认为有一种简单但愚蠢的方式。不幸的是，父节点之间的边缘似乎无法以正确的角度转动，因此我们必须在没有子节点的情况下制作bfs布局并在之后添加它们（这是一个愚蠢的黑客，但是如果您保存所有子节点并且它可以工作之后添加它们：

window.addEventListener('DOMContentLoaded', function() { // on dom ready

  // photos from flickr with creative commons license

  var cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
      .selector('node')
      .style({
        'height': 80,
        'width': 80,
        'background-fit': 'cover',
        'border-color': '#000',
        'border-width': 3,
        'border-opacity': 0.5
      })
      .selector('.eating')
      .style({
        'border-color': 'red'
      })
      .selector('.eater')
      .style({
        'border-width': 9
      })
      .selector('edge')
      .style({
        "curve-style": "taxi",
        "taxi-direction": "downward",
        "taxi-turn": 20,
        "taxi-turn-min-distance": 5
      })
      .selector('#bird')
      .style({
        'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
      })
      .selector('#cat')
      .style({
        'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
      })
      .selector('#ladybug')
      .style({
        'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
      })
      .selector('#aphid')
      .style({
        'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
      })
      .selector('#rose')
      .style({
        'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
      })
      .selector('#grasshopper')
      .style({
        'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
      })
      .selector('#plant')
      .style({
        'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
      })
      .selector('#wheat')
      .style({
        'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
      }),

    elements: {
      nodes: [{
          data: {
            id: 'bird'
          }
        },
        {
          data: {
            id: 'ladybug'
          }
        },
        {
          data: {
            id: 'aphid'
          }
        },
        {
          data: {
            id: 'rose'
          }
        },
        {
          data: {
            id: 'grasshopper'
          }
        },
        {
          data: {
            id: 'plant'
          }
        },
        {
          data: {
            id: 'wheat'
          }
        }
      ],
      edges: [{
          data: {
            source: 'bird',
            target: 'ladybug'
          }
        },
        {
          data: {
            source: 'bird',
            target: 'grasshopper'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'plant'
          }
        },
        {
          data: {
            source: 'grasshopper',
            target: 'wheat'
          }
        },
        {
          data: {
            source: 'ladybug',
            target: 'aphid'
          }
        },
        {
          data: {
            source: 'aphid',
            target: 'rose'
          }
        }
      ]
    },
    layout: {
      name: 'breadthfirst',
      directed: true
    }
  }); // cy init

  cy.ready(function() {
    cy.ready(function() {
      cy.add({
        data: {
          id: 'cat',
          parent: 'bird'
        }
      });
    });
  });

}); // on dom ready
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet" />
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <title>Images</title>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

我在cytoscape的css部分添加了几行，也在js文件末尾的cy.ready（）部分添加了几行。

0
投票

我稍微挖了一下源代码，发现你可以通过将target-endpoint和source-endpoint边缘样式属性设置为outside-to-node来使这个工作按预期工作。

有一种时髦的行为，当父节点过于靠近时，边缘会消失。我发现设置'edge-distances': 'node-position'和'taxi-turn-min-distance': '0px'有助于此。这是完整的边缘样式供参考：

'curve-style': 'taxi',
'edge-distances': 'node-position',
'taxi-turn-min-distance': '0px',
'source-arrow-shape': 'triangle-backcurve',
'target-arrow-shape': 'triangle',
'target-endpoint': 'outside-to-node',
'source-endpoint': 'outside-to-node'
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.