javascriptcytoscape.jscytoscape

Multiple data values for label text in cytoscape.js


I am trying to add multiple values to a label in cytoscape.js like so -

{
    "selector": "edge",
    "style": {
        "curve-style": "haystack",
        "text-wrap": "wrap",
        "label": "data(count)" + "data(edgevalue)",
        "font-size": "8px",
        "color": "black",
        "haystack-radius": "0.5",
        "opacity": "0.4",
        "line-color": "#bbb",
        "width": "mapData(weight, 0, 1, 1, 8)",
    }
},

However this is literally just displaying -

data(count)data(edgevalue)

As the label text. If I remove one or the other it prints the correct value for each. I tried adding a '\n' for a line break, which created a line break but the values were just the same as above.

I also tried data(count + edgevalue) to no avail.

How can I achieve multiple data attributes in a label text?


Solution

  • You can use mappers to get the correct data into your styles: mappers

    Also, I usually use template strings:

    {
        label: function (element) { 
            return `${element.data("attribute_01")} + ${element.data("attribute_02")}`
        }
    }
    

    Here you can see a simple example:

    document.addEventListener("DOMContentLoaded", function() {
      var cy = (window.cy = cytoscape({
        container: document.getElementById("cy"),
    
        // demo your layout
        layout: {
          name: "klay"
    
          // some more options here...
        },
    
        style: [{
            selector: "node",
            style: {
              "background-color": "#dd4de2"
            }
          },
          {
            selector: ".leaf",
            style: {
              "background-color": "#000"
            }
          },
          {
            selector: "edge",
            style: {
              "curve-style": "bezier",
              "target-arrow-shape": "triangle",
              "line-color": "#dd4de2",
              "target-arrow-color": "#dd4de2",
              "opacity": "0.5",
              "label": function(node) {
                return `${node.data("source")} -> ${node.data("target")}`
              }
            }
          }
        ],
        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.nodes().leaves().addClass("leaf");
    });
    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>