Centering a JavaScript object within a div

Question

Centering a JavaScript object within a div

I recently delved into the world of JavaScript and decided to experiment with this graphing library.

I followed one of their example codes, and now I have a bit of a beginner-level HTML/JS question.

This is the code snippet they provided:

Upon running this code, the graph is displayed on the left side of the div element.

I am curious about how I can center align this object within the div.

I'm unsure whether achieving this requires an "HTML/CSS" solution or if it falls under a "JS task." Upon inspecting the API documentation, I couldn't find any alignment options.

I apologize for the basic nature of this question; I attempted to solve it myself but haven't had any luck so far.

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>Tutorial Demo</title>
    </head>
    <body>
      <div id="mountNode"></div>
      <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>
      <script>
        // JavaScript code block from the example
      </script>
    </body>
  </html>

javascript html css

Answer 1

Answer №1

simply utilize flexbox.

#mountNode{
display:flex;
justify-content:center;
}

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Tutorial Demo</title>
      </head>
      <body>
        <div id="mountNode"></div>
        <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>
        <script>
          const graph = new G6.Graph({
            container: 'mountNode',
            width: 800,
            height: 600,
            // Default properties for all the nodes
            defaultNode: {
              labelCfg: {
                style: {
                  fill: '#fff',
                },
              },
            },
            // Default properties for all the edges
            defaultEdge: {
              labelCfg: {
                autoRotate: true,
              },
            },
            // The node styles in different states
            nodeStateStyles: {
              // The node style when the state 'hover' is true
              hover: {
                fill: 'lightsteelblue',
              },
              // The node style when the state 'click' is true
              click: {
                stroke: '#000',
                lineWidth: 3,
              },
            },
            // The edge styles in different states
            edgeStateStyles: {
              // The edge style when the state 'click' is true
              click: {
                stroke: 'steelblue',
              },
            },
            // Layout
            layout: {
              type: 'force',
              linkDistance: 100,
              preventOverlap: true,
              nodeStrength: -30,
              edgeStrength: 0.1,
            },
            // Built-in Behaviors
            modes: {
              default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
            },
          });
    
          const main = async () => {
            const response = await fetch(
              'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
            );
            const remoteData = await response.json();
    
            const nodes = remoteData.nodes;
            const edges = remoteData.edges;
            nodes.forEach((node) => {
              if (!node.style) {
                node.style = {};
              }
              node.style.lineWidth = 1;
              node.style.stroke = '#666';
              node.style.fill = 'steelblue';
              switch (node.class) {
                case 'c0': {
                  node.type = 'circle';
                  node.size = 30;
                  break;
                }
                case 'c1': {
                  node.type = 'rect';
                  node.size = [35, 20];
                  break;
                }
                case 'c2': {
                  node.type = 'ellipse';
                  node.size = [35, 20];
                  break;
                }
              }
            });
            edges.forEach((edge) => {
              if (!edge.style) {
                edge.style = {};
              }
              edge.style.lineWidth = edge.weight;
              edge.style.opacity = 0.6;
              edge.style.stroke = 'grey';
            });
    
            graph.data(remoteData);
            graph.render();
    
            // Mouse enter a node
            graph.on('node:mouseenter', (e) => {
              const nodeItem = e.item; // Get the target item
              graph.setItemState(nodeItem, 'hover', true); // Set the state 'hover' of the item to be true
            });
    
            // Mouse leave a node
            graph.on('node:mouseleave', (e) => {
              const nodeItem = e.item; // Get the target item
              graph.setItemState(nodeItem, 'hover', false); // Set the state 'hover' of the item to be false
            });
    
            // Click a node
            graph.on('node:click', (e) => {
              // Swich the 'click' state of the node to be false
              const clickNodes = graph.findAllByState('node', 'click');
              clickNodes.forEach((cn) => {
                graph.setItemState(cn, 'click', false);
              });
              const nodeItem = e.item; // et the clicked item
              graph.setItemState(nodeItem, 'click', true); // Set the state 'click' of the item to be true
            });
    
            // Click an edge
            graph.on('edge:click', (e) => {
              // Swich the 'click' state of the edge to be false
              const clickEdges = graph.findAllByState('edge', 'click');
              clickEdges.forEach((ce) => {
                graph.setItemState(ce, 'click', false);
              });
              const edgeItem = e.item; // Get the clicked item
              graph.setItemState(edgeItem, 'click', true); // Set the state 'click' of the item to be true
            });
          };
          main();
        </script>
      </body>
    </html>

Answer 2

simply utilize flexbox.

#mountNode{
display:flex;
justify-content:center;
}

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Tutorial Demo</title>
      </head>
      <body>
        <div id="mountNode"></div>
        <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>
        <script>
          const graph = new G6.Graph({
            container: 'mountNode',
            width: 800,
            height: 600,
            // Default properties for all the nodes
            defaultNode: {
              labelCfg: {
                style: {
                  fill: '#fff',
                },
              },
            },
            // Default properties for all the edges
            defaultEdge: {
              labelCfg: {
                autoRotate: true,
              },
            },
            // The node styles in different states
            nodeStateStyles: {
              // The node style when the state 'hover' is true
              hover: {
                fill: 'lightsteelblue',
              },
              // The node style when the state 'click' is true
              click: {
                stroke: '#000',
                lineWidth: 3,
              },
            },
            // The edge styles in different states
            edgeStateStyles: {
              // The edge style when the state 'click' is true
              click: {
                stroke: 'steelblue',
              },
            },
            // Layout
            layout: {
              type: 'force',
              linkDistance: 100,
              preventOverlap: true,
              nodeStrength: -30,
              edgeStrength: 0.1,
            },
            // Built-in Behaviors
            modes: {
              default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
            },
          });
    
          const main = async () => {
            const response = await fetch(
              'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
            );
            const remoteData = await response.json();
    
            const nodes = remoteData.nodes;
            const edges = remoteData.edges;
            nodes.forEach((node) => {
              if (!node.style) {
                node.style = {};
              }
              node.style.lineWidth = 1;
              node.style.stroke = '#666';
              node.style.fill = 'steelblue';
              switch (node.class) {
                case 'c0': {
                  node.type = 'circle';
                  node.size = 30;
                  break;
                }
                case 'c1': {
                  node.type = 'rect';
                  node.size = [35, 20];
                  break;
                }
                case 'c2': {
                  node.type = 'ellipse';
                  node.size = [35, 20];
                  break;
                }
              }
            });
            edges.forEach((edge) => {
              if (!edge.style) {
                edge.style = {};
              }
              edge.style.lineWidth = edge.weight;
              edge.style.opacity = 0.6;
              edge.style.stroke = 'grey';
            });
    
            graph.data(remoteData);
            graph.render();
    
            // Mouse enter a node
            graph.on('node:mouseenter', (e) => {
              const nodeItem = e.item; // Get the target item
              graph.setItemState(nodeItem, 'hover', true); // Set the state 'hover' of the item to be true
            });
    
            // Mouse leave a node
            graph.on('node:mouseleave', (e) => {
              const nodeItem = e.item; // Get the target item
              graph.setItemState(nodeItem, 'hover', false); // Set the state 'hover' of the item to be false
            });
    
            // Click a node
            graph.on('node:click', (e) => {
              // Swich the 'click' state of the node to be false
              const clickNodes = graph.findAllByState('node', 'click');
              clickNodes.forEach((cn) => {
                graph.setItemState(cn, 'click', false);
              });
              const nodeItem = e.item; // et the clicked item
              graph.setItemState(nodeItem, 'click', true); // Set the state 'click' of the item to be true
            });
    
            // Click an edge
            graph.on('edge:click', (e) => {
              // Swich the 'click' state of the edge to be false
              const clickEdges = graph.findAllByState('edge', 'click');
              clickEdges.forEach((ce) => {
                graph.setItemState(ce, 'click', false);
              });
              const edgeItem = e.item; // Get the clicked item
              graph.setItemState(edgeItem, 'click', true); // Set the state 'click' of the item to be true
            });
          };
          main();
        </script>
      </body>
    </html>

Centering a JavaScript object within a div

Answer №1

Similar questions

What methods is Facebook using to manage their onbeforeunload confirmation dialog?

Using Node.js and Express to retrieve data from a MySQL database and update a table

Using a CSS hack to create a border cutout

The icon displays correctly in Firefox but is not visible in IE

Interpreting binary decimal data using JavaScript

``on click of the back button of the browser, automatically submit the form

Convert the button element to an image

react component fails to rerender upon state change

Obtain specific text from elements on a website

Angular HTTP request with form data is not functioning

Ways to display notifications when the user is not actively browsing the website?

Creating Hbbtv applications with the help of a Firefox Addon

Implementing HTML rendering within a <script> tag using Vue.js

Arrange a List in immutable.js by using an array of index values

Position the textAngular toolbar at the bottom of the text editing interface

What is the best way to repair a react filter?

The $_GET[id] function is malfunctioning within the designated div element

Customer is unable to locate the "InitializeAuthenticationService" function

Submitting data using various submit buttons in PHP

$rootScope undefined in an easy AngularJs Routing Demo