将 JS object 对齐到 div 的中间
[英]Aligning a JS object to the middle of a div
问题描述
我最近开始玩 js，特别是使用这个图形库。
我运行了他们的一些示例代码，我得到了一些菜鸟 HTML / js 问题。
这是他们的示例代码：
当我运行此代码时，图表出现在 div 的左侧。
我想知道如何将这个 object 对齐到 div 的中间。
I don't really know if this is a "HTML / CSS" task - or rather a "js task" which means I should obtain this behaviour via the object API (tbh, I tried looking into the API and I saw no alignment options ）。
抱歉，如果这是一个非常菜鸟的问题，我尝试解决它，但没有成功。
<: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>1 个解决方案
解决方案1
0 已采纳 2021-01-01 22:39:38
只需使用 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>
如何在js中将div置于最前面，调整大小并将其居中到屏幕中间？
[英]How bring div to front, resize and center it to the middle of the screen onclick in js?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.