g6 installation
g6 installation
npm install --save @antv/g6
Initialize the canvas
plugins: The stored plugin container
container: String | HTMLElement, must, the container id created in Step 1 or the container itself
width: the width of the graph
height: the height of the picture
fitView: View centered
defaultNode: default element style
defaultEdge: Default line style (set transparency to 0.2 to prevent too many lines and look confused)
= new ({
plugins: ['tooltip'], // Configuration Plug-in container: "g-container", // String | HTMLElement, must, the container id created in Step 1 or the container itself width: 800, // Number, must, the width of the graph height: 500, // Number, must, the height of the figure fitView: true,
defaultNode: {
size: [34, 34],
style: {
fill: "#ffffff",
stroke: "rgba(0,0,0,.35)",
lineWidth: 2,
cursor: "pointer",
radius: [2, 2],
opacity: 0.2,
},
labelCfg: {
style: {
fontSize: 14,
},
position: "bottom",
offset: 5,
},
},
defaultEdge: {
type: "line",
color: "#999999",
style: {
opacity:0.2,
cursor: "pointer",
endArrow: {
path: (6, 5, 0),
d: 0,
fill: "red",
cursor: "pointer",
lineDash: [0],
},
},
labelCfg: {
autoRotate: true,
style: {
background: {
fill: "#ffffff",
stroke: "#000000",
padding: [2, 2, 2, 2],
radius: 2,
cursor: "pointer",
},
},
},
},
},
modes: {
default: [
{
type: "zoom-canvas",
enableOptimize: true,
optimizeZoom: 0.9,
},
{
type: "drag-canvas",
enableOptimize: true,
},
"drag-node",
"brush-select",
"click-select",
],
},
});Read the data source in Step 2 to the graph
(); // Read Step 2 The data source in the graph
Rendering
(); // Rendering
Bubble suspension tips (plug-in)
// hint const tooltip = new ({
offsetX: 10,
offsetY: 40,
getContent: (e) => {
const outDiv = ("div");
= "fit-content";
= "fit-content";
const model = ();
if (() === "node") {//Judge whether it is an element or a relationship line = `${}`;
} else {
const source = ();
const target = ();
= `source：${().id}<br/>Where to go：${
().id
}`;
}
return outDiv;
},
});Custom Elements
// Customize a node named quadrilateral to judge elements through data type (
"quadrilateral",
{
draw(cfg, group) {
const size = (cfg); // Convert to [width, height] mode const color = ;
const width = size[0];
const height = size[1];
// / 1 \
// 4 2
// \ 3 /
const path = [
["M", -width / 4, 0 - height / 1.5], // Upper vertex ["L", width / 2, 0 - height / 1.5], // Right vertex ["L", width / 4, 0], // Lower vertex ["L", -width / 2, 0], // Left vertex ["Z"], // Closed ];
const style = { path: path, stroke: color, ... };
// Add a path graphic as keyShape const keyShape = ("path", {
attrs: {
...style,
},
draggable: true,
name: "diamond-keyShape", // In G6 3.3 and later versions, name must be specified, which can be any string, but it needs to be unique in the same custom element type });
// Return keyShape return keyShape;
},
afterDraw(cfg, group) {
const size = (cfg); // Convert to [width, height] mode const color = ;
const width = size[0];
const height = size[1];
// / 1 \
// 4 2
// \ 3 /
const path = [
["M", -width / 4, 0 - height / 1.5], // Upper vertex ["L", width / 2, 0 - height / 1.5], // Right vertex ["L", width / 4, 0], // Lower vertex ["L", -width / 2, 0], // Left vertex ["Z"], // Closed ];
const style = { path: path, stroke: color, ... };
// Add a path graphic as keyShape const keyShape = ("path", {
attrs: {
...style,
},
draggable: true,
name: "diamond-keyShape", // In G6 3.3 and later versions, name must be specified, which can be any string, but it needs to be unique in the same custom element type });
// Return keyShape return keyShape;
},
},
// Note that 'single-node' is inherited here "rect"
);Add, edit, delete
New
Drag from outside to the canvas and get the position coordinates of the canvas first
point = (, )
Added elements (rect is square)
("node", {
x: ,//x coordinate y: ,//y coordinate label: "name",
type: "rect",
id:'123',
size: [100, 100],//size style: {//style lineWidth: 2,
stroke: "#00BBEF",
fill: "#DAF3FF",
},
nodeStateStyles: {//Status Style selected: {//Select style lineWidth: 1,
stroke: "#00BBEF",
},
hover: {//Suspended style lineWidth: 1,
stroke: "#00BBEF",
},
},
});Set the selected status
(item, "selected", true);
Unselect status
(item, "selected", false);
Set the floating state
(item, "hover", true);
Cancel the floating state
(item, "hover", false);
Edit Update Element
("123", //id
{
x: ,//x coordinate y: ,//y coordinate label: "name",
type: "rect",
id:'123',
size: [100, 100],//size style: {//style lineWidth: 2,
stroke: "#00BBEF",
fill: "#DAF3FF",
},
nodeStateStyles: {//Status Style selected: {//Select style lineWidth: 1,
stroke: "#00BBEF",
},
hover: {//Suspended style lineWidth: 1,
stroke: "#00BBEF",
},
},
});delete
('123')Add, edit, delete relationship lines
New
("edge", {
label: "name",
type: "line",
id:'edge123',
target:'node1',//source source:'node2',//Target style: {//style lineWidth: 2,
lineDash:[8]//dotted line },
nodeStateStyles: {//Status Style selected: {//Select style lineWidth: 1,
stroke: "#00BBEF",
},
hover: {//Suspended style lineWidth: 1,
stroke: "#00BBEF",
},
},
});Edit update relationship
("edge123", //id
{
label: "name",
type: "line",
id:'edge123',
target:'node1',//source source:'node2',//Target style: {//style lineWidth: 2,
lineDash:[8]//dotted line },
nodeStateStyles: {//Status Style selected: {//Select style lineWidth: 1,
stroke: "#00BBEF",
},
hover: {//Suspended style lineWidth: 1,
stroke: "#00BBEF",
},
},
});Delete relationships
('edge123')Drag the element to get the position
// Drag the node ("node:dragend", (ev) =&gt; {
(ev);
let{x,y} = ()
})Elements show and hide
//node is the element node, 123 is the element's idlet node = ('123')
//hide()
//show()Hover related line highlighting elements on both sides
First listen to the link mouse movement event, then listen to the removal event
When the mouse is moved in, highlight lines and elements on both sides
When the mouse is moved out, cancel the line and elements on both sides are highlighted.
//Hoom the line, highlight related elements ("edge:mouseenter", (e) => {
();
const source = ();
const target = ();
//Kao Liang (source, "hover", true);
(target, "hover", true);
(, "hover", true);
//Set the top display of the hierarchy (prevent it from being overwritten) ()
()
()
//Because the initialized line transparency is 0.2, the transparency is set to 1 here for easy viewing (,{
style:{opacity:1}
})
});
//Hoom the line, untapped related elements ("edge:mouseleave", (e) => {
();
const source = ();
const target = ();
//Cancel Highlight (source, "hover", false);
(target, "hover", false);
(, "hover", false);
(,{
style:{opacity:0.2}
})
});Select the element to highlight the current element and the relationship brother nodes and lines
1. Set the transparency of all elements 0.2
2. Highlight the element when clicking, the transparency is 1
3. Determine whether the source data and target data of the line are related to the currently clicked node. If there is, it will be highlighted. If there is no, it will be dark.
("node:click",ev=>{
if(!ev) return
let {id} = ()
(id,'selected',true)
();
// Used to store id and clear the previous state = id
//Set all elements transparency 0.2 ().forEach(node=>{
(node,{style:{opacity:0.2}})
})
//Highlight the current click element (,{style:{opacity:1}})
//Element centered ()
//Highlight the associated lines and nodes ().forEach(edge=>{
if(() === ){
((),{style:{opacity:1}})
(edge,{style:{opacity:1}})
()
}else if(() === ){
((),{style:{opacity:1}})
(edge,{style:{opacity:1}})
()
}else{
(edge,{style:{opacity:0.2}})
}
})
})Click the blank space to clear the mark status
("canvas:click",()=>{
().forEach(node=>{
if(){
//Set all elements transparency 0.2 (node,{style:{opacity:0.2}})
}
(node)
})
().forEach(edge=>{
if(){
//Association line 0.2 (edge,{style:{opacity:0.2}})
}
(edge)
})
})The above is the detailed content of the vue+G6 graphical implementation function example. For more information about vue G6 graphicalization, please pay attention to my other related articles!