javascript - How to make a Cytoscape.js canvas respect its parent's position - Stack Overflow

admin管理员组

文章数量:1317915

I have a React ponent that renders a Cytoscape dagre graph once some data has been fetched from the server. It seems to render a canvas that takes up the right half of the parent <div id="cy" />. Calling cy.center() and cy.fit() centers and fits the graph itself to the parent div, but only half the visualisation is shown because the containing canvas is half off the screen.

Setting the following CSS:

position: absolute;
left: 0;
right: 0;

on the container, as in all the online examples, will center the canvas, but breaks the flow of the document. It also doesn't resolve the half size issue.

The JSX:

  if (moduleStructure) {
    return (
      <div
        id="cy-module-structure"
        style={{
          position: "absolute",
          left: 0,
          top: 0,
          height: "500px",
          width: "1500px",
          display: "block",
        }}
      />
    );
  }

The graph generation code. This is called by a React hook after the data has been fetched.

  function generateGraph(nodes, edges) {
    cytoscape.use(dagre);
    const cy = cytoscape({
      container: document.getElementById("cy-module-structure"),
      boxSelectionEnabled: false,
      autounselectify: true,
      layout: {
        name: "dagre",
        nodeDimensionsIncludeLabels: true,
      },
      zoom: 1,
      pan: { x: 0, y: 0 },
      style: [
        {
          selector: "node",
          style: {
            content: "data(label)",
            "text-valign": "center",
            "text-halign": "center",
            "background-color": "#11479e",
          },
        },
        {
          selector: "edge",
          style: {
            width: 4,
            "target-arrow-shape": "triangle",
            "line-color": "#9dbaea",
            "target-arrow-color": "#9dbaea",
            "curve-style": "bezier",
          },
        },
      ],
      elements: {
        nodes,
        edges,
      },
    });

    cy.ready(() => {
      cy.center();
      cy.fit();
      cy.resize();
    });
  }

And finally the parent JSX:

      <div className="top-flex"> // flex-direction: row: 
        <Diagram /> // Cytoscape ponent
        <div className="basic-info">
          <H3>TEXT</H3>
          <small>INFO</small>
        </div>
      </div>

Ideally the graph should take up the full width of the parent div. In the screenshot, you can see the effect described above.

I have a React ponent that renders a Cytoscape dagre graph once some data has been fetched from the server. It seems to render a canvas that takes up the right half of the parent <div id="cy" />. Calling cy.center() and cy.fit() centers and fits the graph itself to the parent div, but only half the visualisation is shown because the containing canvas is half off the screen.

Setting the following CSS:

position: absolute;
left: 0;
right: 0;

on the container, as in all the online examples, will center the canvas, but breaks the flow of the document. It also doesn't resolve the half size issue.

The JSX:

  if (moduleStructure) {
    return (
      <div
        id="cy-module-structure"
        style={{
          position: "absolute",
          left: 0,
          top: 0,
          height: "500px",
          width: "1500px",
          display: "block",
        }}
      />
    );
  }

The graph generation code. This is called by a React hook after the data has been fetched.

  function generateGraph(nodes, edges) {
    cytoscape.use(dagre);
    const cy = cytoscape({
      container: document.getElementById("cy-module-structure"),
      boxSelectionEnabled: false,
      autounselectify: true,
      layout: {
        name: "dagre",
        nodeDimensionsIncludeLabels: true,
      },
      zoom: 1,
      pan: { x: 0, y: 0 },
      style: [
        {
          selector: "node",
          style: {
            content: "data(label)",
            "text-valign": "center",
            "text-halign": "center",
            "background-color": "#11479e",
          },
        },
        {
          selector: "edge",
          style: {
            width: 4,
            "target-arrow-shape": "triangle",
            "line-color": "#9dbaea",
            "target-arrow-color": "#9dbaea",
            "curve-style": "bezier",
          },
        },
      ],
      elements: {
        nodes,
        edges,
      },
    });

    cy.ready(() => {
      cy.center();
      cy.fit();
      cy.resize();
    });
  }

And finally the parent JSX:

      <div className="top-flex"> // flex-direction: row: 
        <Diagram /> // Cytoscape ponent
        <div className="basic-info">
          <H3>TEXT</H3>
          <small>INFO</small>
        </div>
      </div>

Ideally the graph should take up the full width of the parent div. In the screenshot, you can see the effect described above.

• javascript
• css
• reactjs
• cytoscape.js

Share Improve this question Follow edited Apr 3, 2019 at 12:04 Ondra K. 3,10755 gold badges2727 silver badges4242 bronze badges asked Apr 3, 2019 at 11:23 mtbhachtmtbhacht 7311 silver badge33 bronze badges 2

• I had this exact problem, and for me it was that a higher level style applied was text-align: center. Removing that aligned things correctly. – Jim Commented Apr 15, 2019 at 17:02
• 1 This was the problem - top level style applied to .App of text-align center. Much appreciated. If you add this as an answer I'll accept. – mtbhacht Commented Apr 25, 2019 at 16:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

The problem is that a higher level style was applied text-align: center. Removing that should align things correctly.

(1) Your ordering of resize and fit is reversed. It doesn't make sense to fit if you're going to resize afterwards. Fitting happens on the available bounds.

(2) Make sure you mount Cytoscape only after ponentDidMount().

(3) The container must be something like position:relative or position:absolute (definitely not position:static) such that the children of container can be positioned relative to container. Cytoscape.js will set position:relative by default, so it's sensibly set unless you override it.

本文标签： javascriptHow to make a Cytoscapejs canvas respect its parent39s positionStack Overflow