Multiple data values for label text in cytoscape.js

Question

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?

Answer 1

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/[email protected]/klay.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-klay.min.js"></script>
</head>

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

</html>