cytoscape.js

Target Arrow Opacity

I have a cytoscape graph with directional edges. They are set like that:

style: {
          ...
          'line-color': '#FFFFFF',
          'target-arrow-shape': 'triangle',
          'target-arrow-color': '#FFFFFF',
          'source-arrow-color': '#FFFFFF',
          ....
},

I try to low the opacity of some edges like that:

cyElement.animate({
        style: {
          opacity: 0.2,
        },
        duration: 500,
      });

The style is set perfectly for the edges except for the tip of the arrow as you can see on the screenshot below:

arrows with low opacity but tip is black

Does someone has a solution for this ?

Solution

  • I prepared a snippet with your desired outcome. As you can see, the style can be set by calling .animate(); on a collection of nodes and/or edges. I choose the closedNeighborhood function, but you can use any other collection as you please. I can't reproduce your problem, though you should be able to use my code to achieve the correct behaviour in your code.

    document.addEventListener("DOMContentLoaded", function () {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),

    // demo your layout
    layout: {
      name: "klay"
    },

    style: [
      {
        selector: "node",
        style: {
          "background-color": "#dd4de2"
        }
      },
      {
        selector: "edge",
        style: {
          'curve-style': 'bezier',
          'target-arrow-shape': 'triangle',
          'line-color': '#000',
          'target-arrow-color': '#000',
          'source-arrow-color': '#000',
          'opacity': 1,
        }
      },
    ],
    elements: {
      nodes: [
        { data: { id: "n0" } },
        { data: { id: "n1" } },
        { data: { id: "n2" } },
        { data: { id: "n3" } },
        { data: { id: "n4" } },
        { data: { id: "n5" } },
        { data: { id: "n6" } },
        { data: { id: "n7" } },
        { data: { id: "n8" } },
        { data: { id: "n9" } },
        { data: { id: "n10" } },
        { data: { id: "n11" } },
        { data: { id: "n12" } },
        { data: { id: "n13" } },
        { data: { id: "n14" } },
        { data: { id: "n15" } }
      ],
      edges: [
        { data: { source: "n0", target: "n1" } },
        { data: { source: "n1", target: "n2" } },
        { data: { source: "n1", target: "n3" } },
        { data: { source: "n2", target: "n4" } },
        { data: { source: "n4", target: "n5" } },
        { data: { source: "n4", target: "n6" } },
        { data: { source: "n6", target: "n7" } },
        { data: { source: "n6", target: "n8" } },
        { data: { source: "n8", target: "n9" } },
        { data: { source: "n8", target: "n10" } },
        { data: { source: "n10", target: "n11" } },
        { data: { source: "n11", target: "n12" } },
        { data: { source: "n12", target: "n13" } },
        { data: { source: "n13", target: "n14" } },
        { data: { source: "n13", target: "n15" } }
      ]
    }
  }));
  
  cy.off('tap');
  cy.on('tap', 'node', function(event) {
    let elements = event.target.closedNeighborhood(); 
    elements.animate({ 
      style: { opacity: 0.1 }, 
      duration: 1000,
    });
  });
});
    body {
  font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
  font-size: 14px;
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
}
    <html>

<head>
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-klay@3.1.3/cytoscape-klay.min.js"></script>
</head>

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

</html>