javascript - 为什么我的 cytoscape 图没有箭头(虽然我把它们放进去)？

Question

以下 cytoscape.js 图表的边缘没有显示箭头。我确实有一个边缘选择器，它指定了一个三 Angular 形箭头，但它没有显示出来。

var cy = cytoscape({
  container: document.getElementById('cy'),
  style: [{
    selector: 'node',
    style: {
      'background-color': 'mapData(activation, -1, 1, blue, red)',
      'label': 'data(id)'
    }
  }, {
    selector: 'edge',
    style: {
      'width': 3,
      'line-color': function(ele) {
        return ele.data('relation')
      },
      'target-arrow-color': function(ele) {
        return ele.data('relation')
      },
      'target-arrow-shape': 'triangle'
    }
  }],
  // If you want to apply the layout on the constructor
  // you must supply the elements too
  layout: {
    name: 'breadthfirst'
  },
  elements: {
    nodes: [{
        group: 'nodes',
        data: {
          id: 'E1',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E2',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E3',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E4',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E5',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E6',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E7',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'E8',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'LH1',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'RH1',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'LH2',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'LH3',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'RH2',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'LH4',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'RH3',
          activation: 0
        }
      },
      {
        group: 'nodes',
        data: {
          id: 'RH4',
          activation: 0
        }
      }
    ],
    edges: [{
        group: 'edges',
        data: {
          id: 'edge0',
          source: 'E4',
          target: 'E5',
          relation: 'green'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge1',
          source: 'E6',
          target: 'E7',
          relation: 'green'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge2',
          source: 'LH1',
          target: 'E1',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge3',
          source: 'LH1',
          target: 'RH1',
          relation: 'green'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge4',
          source: 'LH2',
          target: 'E4',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge5',
          source: 'LH3',
          target: 'E4',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge6',
          source: 'LH4',
          target: 'E6',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge7',
          source: 'RH1',
          target: 'E2',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge8',
          source: 'RH1',
          target: 'E3',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge9',
          source: 'RH2',
          target: 'E5',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge10',
          source: 'RH3',
          target: 'E7',
          relation: 'red'
        }
      },
      {
        group: 'edges',
        data: {
          id: 'edge11',
          source: 'RH4',
          target: 'E8',
          relation: 'red'
        }
      }
    ]
  }
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

<html>

<head>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>

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

</html>

请注意，对于选择器“边缘”，我指定了一个三 Angular 形头部。

Answer 1

这是一个给出箭头的示例样式

      selector: 'edge',
      style: {
       'target-arrow-shape': 'triangle',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
        'line-color': '#333',
        'width': 1.5,
        'curve-style': 'bezier'
      }
    }

最重要的样式是 target-arrow-shape和 curve-style . 曲线式 值也可以是 straight获得相似的结果(但在某些情况下不完全相同的结果)