Używanie cytoscape.js ustawia styl węzła podczas definiowania go.

Skrócony przykład poniżej:

window.addEventListener('DOMContentLoaded', function(){
  var cy = window.cy = cytoscape({
    elements: {
      nodes: [
        { data: { id: 'a', name: 'apple' }, style: { 'background-color': 'darkgreen' } },
      ]
    }
  });
});

(Mam domyślny styl dla węzła, który jest inny kolor)

Działa to dobrze, ale kiedy uruchomię kod, konsola przeglądarki pokazuje następujące ostrzeżenie:

Ustawianie obwodnicy` stylu` w tworzeniu elementu jest przestarzały

Co to znaczy i jaki jest właściwy (nie przestarzały) sposób, aby go ustawić?

Z góry dziękuję!

2
Károly Ozsvárt 3 styczeń 2020, 21:25

1 odpowiedź

Najlepsza odpowiedź

Prawidłowy sposób robienia tego byłoby użycie arkusza cytoscape, jak widać w każdym przykładzie w Dokumenty :

var cy = (window.cy = cytoscape({
  container: document.getElementById("cy"),
  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: "node",
      css: {
        "label": "data(id)",
        "text-valign": "center",
        "text-halign": "center",
        "background-color": "data(color)"
      }
    },
    {
      selector: "edge",
      css: {
        "line-fill": "radial-gradient",
        "line-gradient-stop-colors": "red green blue",
        "line-gradient-stop-positions": "25 50 75"
      }
    }
  ],
  elements: {
    nodes: [{
        data: {
          id: "a",
          color: "#2763c4"
        }
      },
      {
        data: {
          id: "b",
          color: "#37a32d"
        }
      },
      {
        data: {
          id: "c",
          color: "#37a32d"
        }
      }
    ],
    edges: [{
        data: {
          source: "a",
          target: "b"
        }
      },
      {
        data: {
          source: "a",
          target: "c"
        }
      }
    ]
  },
  layout: {
    name: "dagre"
  }
}));

cy.ready(function() {
  cy.dblclick();
});

var nid = 0;
cy.bind('dblclick', function(evt) {
  console.log('dblclick');
  cy.add({
    group: 'nodes',
    data: {
      id: nid,
      faveColor: 'red'
    },
    position: {
      x: evt.x,
      y: evt.y
    }
  });
  nid++;
});

cy.bind('click', 'node', function(evt) {
  console.log('node clicked: ', evt.target.id());
});
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  float: right;
  position: absolute;
}
<html>

<head>
  <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">
  <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js">
  </script>
  <!-- cyposcape dagre -->
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
  <script src="https://unpkg.com/cytoscape-dblclick/dist/index.js"></script>
</head>

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

</html>
4
Stephan T. 4 styczeń 2020, 11:41