技术标签: 前端 html javascript
useEffect(()=>{
let srcScript = document.createElement('script')
srcScript.async = false
srcScript.src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"
document.head.appendChild(srcScript)
},[])
const initScript = () => {
let script = document.createElement('script')
script.type = 'text/javascript'
script.async = false
localStorage.getItem("mapDataNumber2")
script.text = `
setTimeout(() => {
var count = document.getElementById('data').textContent
// var code = window.location.href.split("@")[1]
// code = decodeURIComponent(code)
datas = JSON.parse(count)
let data ={
"nodes": [
],
"edges": [
]
}
datas.forEach((i,d)=>{
if(d<100){
data.nodes.push({id:i.data.pdAggregateTitle,name:i.data.pdAggregateTitle,level:0,tag:i.data.pdAggregateTitle,childrenNum:i.list.length})
i.list.forEach(item=>{
data.nodes.push({id:item.aggregateTitle,name:item.aggregateTitle,level:2,isLeaf:true,tags:[i.data.pdAggregateTitle]})
data.edges.push({source:i.data.pdAggregateTitle,target:item.aggregateTitle})
})
}
})
let showNodes = [];
let showEdges = [];
let curShowNodes = [];
let curShowEdges = [];
let nodes = [];
let edges = [];
let nodeMap = new Map();
let edgesMap = new Map();
let curShowNodesMap = new Map();
let highlighting = false;
let currentFocus;
const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const LIMIT_OVERFLOW_WIDTH = width;
const LIMIT_OVERFLOW_HEIGHT = height;
const mapNodeSize = (nodes, propertyName, visualRange) => {
let minp = 9999999999;
let maxp = -9999999999;
nodes.forEach((node) => {
minp = node[propertyName] < minp ? node[propertyName] : minp;
maxp = node[propertyName] > maxp ? node[propertyName] : maxp;
});
const rangepLength = maxp - minp;
const rangevLength = visualRange[1] - visualRange[0];
nodes.forEach((node) => {
node.size = ((node[propertyName] - minp) / rangepLength) * rangevLength + visualRange[0];
});
};
const lightColors = [
'#8FE9FF',
'#87EAEF',
'#FFC9E3',
'#A7C2FF',
'#FFA1E3',
'#FFE269',
'#BFCFEE',
'#FFA0C5',
'#D5FF86',
];
const darkColors = [
'#7DA8FF',
'#44E6C1',
'#FF68A7',
'#7F86FF',
'#AE6CFF',
'#FF5A34',
'#5D7092',
'#FF6565',
'#6BFFDE',
];
const uLightColors = [
'#CFF6FF',
'#BCFCFF',
'#FFECF5',
'#ECFBFF',
'#EAD9FF',
'#FFF8DA',
'#DCE2EE',
'#FFE7F0',
'#EEFFCE',
];
const uDarkColors = [
'#CADBFF',
'#A9FFEB',
'#FFC4DD',
'#CACDFF',
'#FFD4F2',
'#FFD3C9',
'#EBF2FF',
'#FFCBCB',
'#CAFFF3',
];
const gColors = [];
const unlightColorMap = new Map();
lightColors.forEach((lcolor, i) => {
gColors.push('l(0) 0:' + lcolor + ' 1:' + darkColors[i]);
unlightColorMap.set(gColors[i], 'l(0) 0:' + uLightColors[i] + ' 1:' + uDarkColors[i]);
});
let graph;
const layoutCfg = {
type: 'force',
nodeSize: (d) => {
return d.size / 2 + 5;
},
nodeStrength: 30,
collideStrength: 0.8,
alphaDecay: 0.01,
preventOverlap: true,
onTick: () => {
const nodeItems = graph.getNodes();
const height = graph.get('height');
const width = graph.get('width');
const padding = 10;
nodeItems.forEach((item) => {
const model = item.getModel();
if (model.x > width - padding) model.x = width - padding;
else if (model.x < padding) model.x = padding;
if (model.y > height - padding) model.y = height - padding;
else if (model.y < padding) model.y = padding;
});
},
};
G6.registerBehavior('double-finger-drag-canvas', {
getEvents: function getEvents() {
return {
wheel: 'onWheel',
};
},
onWheel: (ev) => {
if (ev.ctrlKey) {
const canvas = graph.get('canvas');
const point = canvas.getPointByClient(ev.clientX, ev.clientY);
let ratio = graph.getZoom();
if (ev.wheelDelta > 0) {
ratio = ratio + ratio * 0.05;
} else {
ratio = ratio - ratio * 0.05;
}
graph.zoomTo(ratio, {
x: point.x,
y: point.y,
});
} else {
const x = ev.deltaX || ev.movementX;
const y = ev.deltaY || ev.movementY || (-ev.wheelDelta * 125) / 3;
translate(x, y);
}
ev.preventDefault();
},
});
G6.registerNode(
'bubble',
{
drawShape(cfg, group) {
const self = this;
const r = cfg.size / 2;
// a circle by path
const path = [
['M', -r, 0],
['C', -r, r / 2, -r / 2, r, 0, r],
['C', r / 2, r, r, r / 2, r, 0],
['C', r, -r / 2, r / 2, -r, 0, -r],
['C', -r / 2, -r, -r, -r / 2, -r, 0],
['Z'],
];
const keyShape = group.addShape('path', {
attrs: {
x: 0,
y: 0,
path,
fill: cfg.color || 'steelblue',
},
name: 'path-shape',
});
const mask = group.addShape('path', {
attrs: {
x: 0,
y: 0,
path,
opacity: 0.25,
fill: cfg.color || 'steelblue',
shadowColor: cfg.color.split(' ')[2].substr(2),
shadowBlur: 40,
shadowOffsetX: 0,
shadowOffsetY: 30,
},
name: 'mask-shape',
});
const spNum = 10; // split points number
const directions = [],
rs = [];
self.changeDirections(spNum, directions);
for (let i = 0; i < spNum; i++) {
const rr = r + directions[i] * ((Math.random() * r) / 1000); // +-r/6, the sign according to the directions
if (rs[i] < 0.97 * r) rs[i] = 0.97 * r;
else if (rs[i] > 1.03 * r) rs[i] = 1.03 * r;
rs.push(rr);
}
keyShape.animate(
() => {
const path = self.getBubblePath(r, spNum, directions, rs);
return { path };
},
{
repeat: true,
duration: 10000,
},
);
const directions2 = [],
rs2 = [];
self.changeDirections(spNum, directions2);
for (let i = 0; i < spNum; i++) {
const rr = r + directions2[i] * ((Math.random() * r) / 1000); // +-r/6, the sign according to the directions
if (rs2[i] < 0.97 * r) rs2[i] = 0.97 * r;
else if (rs2[i] > 1.03 * r) rs2[i] = 1.03 * r;
rs2.push(rr);
}
mask.animate(
() => {
const path = self.getBubblePath(r, spNum, directions2, rs2);
return { path };
},
{
repeat: true,
duration: 10000,
},
);
return keyShape;
},
changeDirections(num, directions) {
for (let i = 0; i < num; i++) {
if (!directions[i]) {
const rand = Math.random();
const dire = rand > 0.5 ? 1 : -1;
directions.push(dire);
} else {
directions[i] = -1 * directions[i];
}
}
return directions;
},
getBubblePath(r, spNum, directions, rs) {
const path = [];
const cpNum = spNum * 2; // control points number
const unitAngle = (Math.PI * 2) / spNum; // base angle for split points
let angleSum = 0;
const sps = [];
const cps = [];
for (let i = 0; i < spNum; i++) {
const speed = 0.001 * Math.random();
rs[i] = rs[i] + directions[i] * speed * r; // +-r/6, the sign according to the directions
if (rs[i] < 0.97 * r) {
rs[i] = 0.97 * r;
directions[i] = -1 * directions[i];
} else if (rs[i] > 1.03 * r) {
rs[i] = 1.03 * r;
directions[i] = -1 * directions[i];
}
const spX = rs[i] * Math.cos(angleSum);
const spY = rs[i] * Math.sin(angleSum);
sps.push({ x: spX, y: spY });
for (let j = 0; j < 2; j++) {
const cpAngleRand = unitAngle / 3;
const cpR = rs[i] / Math.cos(cpAngleRand);
const sign = j === 0 ? -1 : 1;
const x = cpR * Math.cos(angleSum + sign * cpAngleRand);
const y = cpR * Math.sin(angleSum + sign * cpAngleRand);
cps.push({ x, y });
}
angleSum += unitAngle;
}
path.push(['M', sps[0].x, sps[0].y]);
for (let i = 1; i < spNum; i++) {
path.push([
'C',
cps[2 * i - 1].x,
cps[2 * i - 1].y,
cps[2 * i].x,
cps[2 * i].y,
sps[i].x,
sps[i].y,
]);
}
path.push(['C', cps[cpNum - 1].x, cps[cpNum - 1].y, cps[0].x, cps[0].y, sps[0].x, sps[0].y]);
path.push(['Z']);
return path;
},
setState(name, value, item) {
const shape = item.get('keyShape');
if (name === 'dark') {
if (value) {
if (shape.attr('fill') !== '#fff') {
shape.oriFill = shape.attr('fill');
const uColor = unlightColorMap.get(shape.attr('fill'));
shape.attr('fill', uColor);
} else {
shape.attr('opacity', 0.2);
}
} else {
if (shape.attr('fill') !== '#fff') {
shape.attr('fill', shape.oriFill || shape.attr('fill'));
} else {
shape.attr('opacity', 1);
}
}
}
},
},
'single-node',
);
G6.registerNode(
'animate-circle',
{
setState(name, value, item) {
const shape = item.get('keyShape');
const label = shape.get('parent').get('children')[1];
if (name === 'disappearing' && value) {
shape.animate(
(ratio) => {
return {
opacity: 1 - ratio,
r: shape.attr('r') * (1 - ratio),
};
},
{
duration: 200,
},
);
label.animate(
(ratio) => {
return {
opacity: 1 - ratio,
};
},
{
duration: 500,
},
);
} else if (name === 'appearing' && value) {
const r = item.getModel().size / 2;
shape.animate(
(ratio) => {
return {
opacity: ratio,
r: r * ratio,
fill: shape.attr('fill'),
};
},
{
duration: 300,
},
);
label.animate(
{
onFrame(ratio) {
return {
opacity: ratio,
};
},
},
{
duration: 300,
},
);
} else if (name === 'dark') {
if (value) {
if (shape.attr('fill') !== '#fff') {
shape.oriFill = shape.attr('fill');
const uColor = unlightColorMap.get(shape.attr('fill'));
shape.attr('fill', uColor);
} else {
shape.attr('opacity', 0.2);
label.attr('fill', '#A3B1BF');
}
} else {
if (shape.attr('fill') !== '#fff') {
shape.attr('fill', shape.oriFill || shape.attr('fill'));
} else {
shape.attr('opacity', 1);
label.attr('fill', '#697B8C');
}
}
}
},
},
'circle',
);
G6.registerEdge(
'animate-line',
{
drawShape(cfg, group) {
const self = this;
let shapeStyle = self.getShapeStyle(cfg);
shapeStyle = Object.assign(shapeStyle, {
opacity: 0,
strokeOpacity: 0,
});
const keyShape = group.addShape('path', {
attrs: shapeStyle,
name: 'path-shape',
});
return keyShape;
},
afterDraw(cfg, group) {
const shape = group.get('children')[0];
shape.animate(
(ratio) => {
const opacity = ratio * cfg.style.opacity;
const strokeOpacity = ratio * cfg.style.strokeOpacity;
return {
opacity: ratio || opacity,
strokeOpacity: ratio || strokeOpacity,
};
},
{
duration: 300,
},
);
},
setState(name, value, item) {
const shape = item.get('keyShape');
if (name === 'disappearing' && value) {
shape.animate(
(ratio) => {
return {
opacity: 1 - ratio,
strokeOpacity: 1 - ratio,
};
},
{
duration: 200,
},
);
} else if (name === 'dark') {
if (value) shape.attr('opacity', 0.2);
else shape.attr('opacity', 1);
}
},
},
'line',
);
graph = new G6.Graph({
container: 'container',
width,
height,
linkCenter: true,
layout: layoutCfg,
modes: {
default: ['drag-canvas'],
},
defaultNode: {
type: 'bubble',
size: 95,
labelCfg: {
position: 'center',
style: {
fill: 'white',
fontStyle: 'bold',
},
},
},
defaultEdge: {
color: '#888',
type: 'animate-line', //'animate-line'
},
});
graph.get('canvas').set('localRefresh', false);
function translate(x, y) {
let moveX = x;
let moveY = y;
/* 获得当前偏移量*/
const group = graph.get('group');
const bbox = group.getBBox();
const leftTopPoint = graph.getCanvasByPoint(bbox.minX, bbox.minY);
const rightBottomPoint = graph.getCanvasByPoint(bbox.maxX, bbox.maxY);
/* 如果 x 轴在区域内,不允许左右超过100 */
if (x < 0 && leftTopPoint.x - x > LIMIT_OVERFLOW_WIDTH) {
moveX = 0;
}
if (x > 0 && rightBottomPoint.x - x < width - LIMIT_OVERFLOW_WIDTH) {
moveX = 0;
}
if (y < 0 && leftTopPoint.y - y > LIMIT_OVERFLOW_HEIGHT) {
moveY = 0;
}
if (y > 0 && rightBottomPoint.y - y < height - LIMIT_OVERFLOW_HEIGHT) {
moveY = 0;
}
graph.translate(-moveX, -moveY);
}
function refreshDragedNodePosition(e) {
const model = e.item.get('model');
model.fx = e.x;
model.fy = e.y;
}
graph.on('node:dragstart', (e) => {
graph.layout();
refreshDragedNodePosition(e);
});
graph.on('node:drag', (e) => {
refreshDragedNodePosition(e);
});
graph.on('node:dragend', (e) => {
e.item.get('model').fx = null;
e.item.get('model').fy = null;
});
const loadData = (data) => {
const layoutController = graph.get('layoutController');
layoutController.layoutCfg.nodeStrength = 30;
layoutController.layoutCfg.collideStrength = 0.8;
layoutController.layoutCfg.alphaDecay = 0.01;
nodes = data.nodes;
edges = data.edges;
showNodes = [];
showEdges = [];
nodeMap = new Map();
edgesMap = new Map();
// find the roots
nodes.forEach((node) => {
if (node.level === 0) {
node.color = gColors[showNodes.length % gColors.length];
node.style = {
fill: gColors[showNodes.length % gColors.length],
lineWidth: 0,
};
node.labelCfg = {
style: {
fontSize: 25,
fill: '#fff',
fontWeight: 300,
},
};
node.x = Math.random() * 800;
node.y = Math.random() * 800;
showNodes.push(node);
}
if (!node.isLeaf) {
const num = node.childrenNum ? \r'('+node.childrenNum+')' : '';
node.label = node.name + num;
} else {
node.label = node.name;
}
nodeMap.set(node.id, node);
});
mapNodeSize(showNodes, 'childrenNum', [100, 150]);
// map the color to F nodes, same to its parent
nodes.forEach((node) => {
if (node.level !== 0 && !node.isLeaf) {
const parent = nodeMap.get(node.tags[0]);
node.color = parent.color;
node.style = {
fill: parent.color,
};
}
});
edges.forEach((edge) => {
// map the id
edge.id = edge.source+'-'+edge.target;
edge.style = {
lineWidth: 0.5,
opacity: 1,
strokeOpacity: 1,
};
edgesMap.set(edge.id, edge);
});
graph.data({
nodes: showNodes,
edges: showEdges,
});
graph.render();
};
graph.on('node:mouseenter', (e) => {
const item = e.item;
const model = item.getModel();
if (model.level === 0) {
return;
}
highlighting = true;
graph.setAutoPaint(false);
const nodeItems = graph.getNodes();
const edgeItems = graph.getEdges();
nodeItems.forEach((node) => {
graph.setItemState(node, 'dark', true);
node.getModel().light = false;
});
graph.setItemState(item, 'dark', false);
model.light = true;
const tags = model.tags;
const findTagsMap = new Map();
let mid = 0;
let fTag = '';
// if the model is F node, find the leaves of it
if (!model.isLeaf && model.level !== 0) {
fTag = model.tag;
nodeItems.forEach((item) => {
const itemModel = item.getModel();
if (!itemModel.isLeaf) return;
const modelTags = itemModel.tags;
modelTags.forEach((mt) => {
const mts = mt.split('-');
if (mts[1] === fTag) {
graph.setItemState(item, 'dark', false);
itemModel.light = true;
}
});
});
}
// find the tags
tags.forEach((t) => {
const ts = t.split('-');
findTagsMap.set(ts[0], mid);
mid++;
if (ts[1]) {
findTagsMap.set(ts[1], mid);
mid++;
}
});
// find the nodes with tag === tags[?]
nodeItems.forEach((item) => {
const node = item.getModel();
if (findTagsMap.get(node.tag) !== undefined) {
graph.setItemState(item, 'dark', false);
node.light = true;
}
});
edgeItems.forEach((item) => {
const source = item.getSource().getModel();
const target = item.getTarget().getModel();
if (source.light && target.light) {
graph.setItemState(item, 'dark', false);
} else {
graph.setItemState(item, 'dark', true);
}
});
graph.paint();
graph.setAutoPaint(true);
});
graph.on('node:mouseleave', () => {
if (highlighting) {
const nodeItems = graph.getNodes();
const edgeItems = graph.getEdges();
highlighting = false;
nodeItems.forEach((item) => {
graph.setItemState(item, 'dark', false);
});
edgeItems.forEach((item) => {
graph.setItemState(item, 'dark', false);
});
}
});
loadData(data);
// click root to expand
graph.on('node:click', (e) => {
curShowNodes = [];
curShowEdges = [];
const item = e.item;
const model = item.getModel();
if (!model.isLeaf && model.level !== 0) {
return;
}
// if clicked a root, hide unrelated items and show the related items
if (model.level === 0) {
const layoutController = graph.get('layoutController');
const forceLayout = layoutController.layoutMethods[0];
forceLayout.forceSimulation.stop();
// light the level 0 nodes
showNodes.forEach((snode) => {
const item = graph.findById(snode.id);
graph.setItemState(item, 'dark', false);
if (snode.x < 0.5 * width) {
snode.x = 300;
} else {
snode.x = width - 300;
}
});
model.x = width / 2;
model.y = height / 2;
// animatively hide the items which are going to disappear
if (curShowEdges.length) {
curShowEdges.forEach((csedge) => {
const item = graph.findById(csedge.id);
item && graph.setItemState(item, 'disappearing', true);
});
}
curShowNodes.forEach((csnode) => {
const item = graph.findById(csnode.id);
item && graph.setItemState(item, 'disappearing', true);
});
graph.positionsAnimate();
// reset curShowNodes nad curShowEdges
curShowNodes = [];
curShowEdges = [];
// click on the same node which is the current focus node, hide the small nodes, change the layout parameters to roots view
if (currentFocus && currentFocus.id === model.id) {
currentFocus = undefined;
layoutController.layoutCfg.nodeStrength = 30;
layoutController.layoutCfg.collideStrength = 0.8;
layoutController.layoutCfg.alphaDecay = 0.01;
} else {
// click other focus node, hide the current small nodes and show the related nodes
currentFocus = model;
// change data after the original items disappearing
const layoutController = graph.get('layoutController');
layoutController.layoutCfg.nodeStrength = () => {
return -80;
};
layoutController.layoutCfg.collideStrength = 0.2;
layoutController.layoutCfg.linkDistance = (d) => {
if (d.source.level !== 0) return 120;
const length = 250;
return length;
};
layoutController.layoutCfg.edgeStrength = () => {
return 2;
};
const tag = model.tag;
const findTags = [];
curShowNodesMap = new Map();
// find the nodes which are the descendants of clicked model
nodes.forEach((node) => {
if (!node.tags) return;
const tags = node.tags;
const tlength = tags.length;
let isChild = false;
const parents = [];
for (let i = 0; i < tlength; i++) {
const ts = tags[i].split('-');
if (ts[0] === tag) {
isChild = true;
}
parents.push(nodeMap.get(ts[0]));
}
if (isChild) {
const randomAngle = Math.random() * 2 * Math.PI;
node.x = model.x + (Math.cos(randomAngle) * model.size) / 2 + 10;
node.y = model.y + (Math.sin(randomAngle) * model.size) / 2 + 10;
// const dist = (model.x - node.x) * (model.x - node.x) + (model.y - node.y) * (model.y - node.y);
if (!node.style) node.style = {};
node.style.lineWidth = 0;
node.style.opacity = 1;
if (node.isLeaf) {
node.type = 'animate-circle';
let color = 'l(0)';
const parentsNum = parents.length;
parents.forEach((parent, i) => {
const parentColor = parent.color.split(' ')[1].substr(2);
color += i / (parentsNum - 1)+':'+ parentColor;
});
if (parentsNum === 1) {
color = model.color.split(' ')[1].substr(2);
}
node.color = color;
node.style.fill = color;
node.style.fill = '#fff';
node.style.lineWidth = 1;
node.size = 60;
node.labelCfg = {
style: {
fontSize: 11,
lineHeight: 19,
fill: '#697B8C',
},
position: 'center',
};
} else if (node.level !== 0) {
node.type = 'circle'; // 'bubble';
node.size = 95;
if (!node.style) node.style = {};
node.color = model.color;
node.style.fill = model.color;
node.labelCfg = {
style: {
fill: '#fff',
fontSize: 14,
},
position: 'center',
};
}
curShowNodes.push(node);
curShowNodesMap.set(node.id, node);
// add the edge connect from model to node which exists in edges
const edgeId = model.id+'-'+node.id;
const edge = edgesMap.get(edgeId);
if (edge) {
edge.color = model.color;
curShowEdges.push(edge);
}
tags.forEach((t) => {
const ts = t.split('-');
if (ts[0] !== tag) {
findTags.push(ts[0]);
}
if (ts[1]) {
findTags.push(ts[1]);
}
});
}
});
// find the nodes which are the ancestors of the current curShowNodes
nodes.forEach((node) => {
const findTagsLength = findTags.length;
for (let i = 0; i < findTagsLength; i++) {
if (node.tag === findTags[i] && curShowNodesMap.get(node.id) === undefined) {
curShowNodes.push(node);
curShowNodesMap.set(node.id, node);
return;
}
}
});
// find the edges whose target end source are in the curShowNodes
curShowNodes.forEach((nu, i) => {
const lu = nu.level;
curShowNodes.forEach((nv, j) => {
if (j <= i) return;
const lv = nv.level;
let edgeId;
if (lu < lv) {
edgeId = nu.id+'-'+nv.id;
} else {
edgeId = nv.id+'-'+nu.id;
}
let color = model.color;
if (nu.isLeaf) {
if (nv.level === 0 && nv.tag !== model.tag) color = '#DFE5EB';
else if (!nv.isLeaf && nv.tags[0] !== model.tag) {
color = '#DFE5EB';
}
} else if (nv.isLeaf) {
if (nu.level === 0 && nu.tag !== model.tag) color = '#DFE5EB';
else if (!nu.isLeaf && nu.tags[0] !== model.tag) {
color = '#DFE5EB';
}
}
const edge = edgesMap.get(edgeId);
if (edge) {
edge.color = color;
curShowEdges.push(edge);
}
});
});
}
setTimeout(() => {
graph.changeData({
nodes: showNodes.concat(curShowNodes),
edges: showEdges.concat(curShowEdges),
});
const nodeItems = graph.getNodes();
const edgeItems = graph.getEdges();
edgeItems.forEach((item) => {
graph.clearItemStates(item);
});
nodeItems.forEach((item) => {
graph.clearItemStates(item);
graph.setItemState(item, 'appearing', true);
});
}, 400);
}
});
graph.on('canvas:click', () => {
currentFocus = undefined;
const forceLayout = graph.get('layoutController').layoutMethods[0];
forceLayout.forceSimulation.stop();
const nodeItems = graph.getNodes();
const edgeItems = graph.getEdges();
if (highlighting) {
highlighting = false;
nodeItems.forEach((item) => {
graph.setItemState(item, 'dark', false);
});
edgeItems.forEach((item) => {
graph.setItemState(item, 'dark', false);
});
} else {
nodeItems.forEach((item) => {
const model = item.getModel();
if (model.level === 0) {
graph.setItemState(item, 'dark', false);
} else {
graph.setItemState(item, 'disappearing', true);
}
});
edgeItems.forEach((item) => {
graph.setItemState(item, 'disappearing', true);
});
curShowNodes = [];
curShowEdges = [];
setTimeout(() => {
const layoutController = graph.get('layoutController');
layoutController.layoutCfg.nodeStrength = 30;
layoutController.layoutCfg.collideStrength = 0.8;
layoutController.layoutCfg.alphaDecay = 0.01;
graph.changeData({
nodes: showNodes,
edges: showEdges,
});
}, 400);
}
});
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
}, 1000);
`
document.head.appendChild(script)
}
const onSearch = (values:any) =>{
if(!values.fuzzyCode) return
props.history.push({ pathname:`/nlpMap/@${values.fuzzyCode}` })
}
示例图
文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下:http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态:[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态
文章浏览阅读1.3w次,点赞45次,收藏99次。我个人用的是anaconda3的一个python集成环境,自带jupyter notebook,但在我打开jupyter notebook界面后,却找不到对应的虚拟环境,原来是jupyter notebook只是通用于下载anaconda时自带的环境,其他环境要想使用必须手动下载一些库:1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境
文章浏览阅读5.2k次,点赞19次,收藏28次。选择scoop纯属意外,也是无奈,因为电脑用户被锁了管理员权限,所有exe安装程序都无法安装,只可以用绿色软件,最后被我发现scoop,省去了到处下载XXX绿色版的烦恼,当然scoop里需要管理员权限的软件也跟我无缘了(譬如everything)。推荐添加dorado这个bucket镜像,里面很多中文软件,但是部分国外的软件下载地址在github,可能无法下载。以上两个是官方bucket的国内镜像,所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn
文章浏览阅读4.5k次,点赞2次,收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了,例如:这里的:sty..._vue el-color-picker
文章浏览阅读640次。基于芯片日益增长的问题,所以内核开发者们引入了新的方法,就是在内核中只保留函数,而数据则不包含,由用户(应用程序员)自己把数据按照规定的格式编写,并放在约定的地方,为了不占用过多的内存,还要求数据以根精简的方式编写。boot启动时,传参给内核,告诉内核设备树文件和kernel的位置,内核启动时根据地址去找到设备树文件,再利用专用的编译器去反编译dtb文件,将dtb还原成数据结构,以供驱动的函数去调用。firmware是三星的一个固件的设备信息,因为找不到固件,所以内核启动不成功。_exynos 4412 刷机
文章浏览阅读2w次,点赞24次,收藏42次。Linux系统配置jdkLinux学习教程,Linux入门教程(超详细)_linux配置jdk
文章浏览阅读3.3k次,点赞5次,收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图:_matlab微米怎么输入
文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件,可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中,对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数,而关闭则使用fclose函数。在C语言中,可以使用fread和fwrite函数进行二进制读写。 Biaoge 于2024-03-09 23:51发布 阅读量:7 ️文章类型:【 C语言程序设计 】在C语言中,用于打开文件的函数是____,用于关闭文件的函数是____。
文章浏览阅读3.4k次,点赞2次,收藏13次。跟随鼠标移动的粒子以grid(SOP)为partical(SOP)的资源模板,调整后连接【Geo组合+point spirit(MAT)】,在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in(CHOP)鼠标位置到metaball的坐标,实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动
文章浏览阅读178次。项目运行环境配置:Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。项目技术:Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成,B/S模式 + Maven管理等等。环境需要1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计
文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多,会从Java-&amp;gt;Jni-&amp;gt;C/C++慢慢分析,后面会慢慢更新。另外,博客只作为自己学习记录的一种方式,对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析 时序图
文章浏览阅读2.4k次,点赞41次,收藏13次。java 数据结构与算法 ——快速排序法_快速排序法