mirror of
https://gitee.com/antv/g6.git
synced 2024-12-07 22:28:26 +08:00
129 lines
4.3 KiB
HTML
129 lines
4.3 KiB
HTML
<!doctype html>
|
||
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">
|
||
|
||
<head>
|
||
<meta content="origin" name="referrer">
|
||
<title>world cup 2018</title>
|
||
<script src="../build/g6.js"></script>
|
||
<script src="../build/plugin.template.maxSpanningForest.js"></script>
|
||
<script src="../build/plugin.layout.forceAtlas2.js"></script>
|
||
<script src="../build/plugin.behaviour.analysis.js"></script>
|
||
<script src="../build/plugin.tool.mapper.js"></script>
|
||
<script src="../build/plugin.tool.fisheye.js"></script>
|
||
<script src="../build/plugin.util.extractSubgraph.js"></script>
|
||
<script src="../build/plugin.tool.highlightSubgraph.js"></script>
|
||
<script src="../build/plugin.edge.quadraticCurve.js"></script>
|
||
<script src="./assets/jquery-3.2.1.min.js"></script>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div id='mountNode' style='background-color:rgb(57,64,77);position:absolute; width:736px; height:800px'>
|
||
<h3 style='color:white; margin: 20pt 20pt 0pt; position: relative;'>2018 世界杯关注度、胜负分析</h3>
|
||
<p style='color:rgb(126,131,139); margin:20px 100px 0px 22px'>该图为 2018 年世界杯期间的相关数据。图上点越大代表该国球队关注的人数越多，连线代表双方有对战，箭头代表胜方，双箭头代表双方均有赢。</p>
|
||
</div>
|
||
|
||
<div id='legend'></div>
|
||
<script>
|
||
|
||
|
||
var graph = null;
|
||
$.getJSON('./assets/data/world-cup2018.json', data => {
|
||
const nodes = data.nodes;
|
||
const edges = data.edges;
|
||
for(let i = 0; i < nodes.length; i += 1){
|
||
nodes[i].degree = 0;
|
||
nodes[i].indegree = 0;
|
||
nodes[i].outdegree = 0;
|
||
}
|
||
for(let i = 0; i < edges.length; i += 1){
|
||
for(let j = 0; j < nodes.length; j += 1){
|
||
if(nodes[j].id == edges[i].source) {
|
||
nodes[j].degree +=1 ;
|
||
if(edges[i].directed)
|
||
nodes[j].outdegree += 1;
|
||
}else if(nodes[j].id == edges[i].target){
|
||
nodes[j].degree += 1;
|
||
if(edges[i].directed)
|
||
nodes[j].indegree += 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
const Mapper = G6.Plugins['tool.mapper'];
|
||
const Plugin = G6.Plugins['layout.forceAtlas2'];
|
||
const nodeSizeMapper = new Mapper('node', 'indegree', 'size', [30, 50], {legendCfg: null});
|
||
const nodeColorMapper = new Mapper('node', 'indegree', 'color', ['#166dac', '#008cec'], {legendCfg: null});
|
||
const FisheyePlugin = G6.Plugins['tool.fisheye'];
|
||
graph = new G6.Graph({
|
||
id: 'mountNode', // dom id
|
||
fitView: 'autoZoom',
|
||
plugins: [new Plugin({maxIteration: 1000, kg: 2, kr: 40, prevOverlapping: true}),
|
||
new FisheyePlugin({radius: 200}),
|
||
nodeSizeMapper, nodeColorMapper
|
||
],
|
||
minZoom: 0,
|
||
modes: {
|
||
default: ['panCanvas']
|
||
},
|
||
width: 736,
|
||
height: 600
|
||
});
|
||
graph.edge({
|
||
style(model) {
|
||
return{
|
||
stroke: '#A3B1BF',
|
||
lineWidth: 2,
|
||
endArrow: model.directed
|
||
};
|
||
}
|
||
});
|
||
graph.node({
|
||
style(model) {
|
||
return {
|
||
stroke: '#2f4c66',
|
||
lineWidth: 5,
|
||
fillOpacity: 1,
|
||
strokeOpacity: 1
|
||
}
|
||
}
|
||
});
|
||
graph.node({
|
||
label(model) {
|
||
return {
|
||
fontFamily: 'PingFang SC',
|
||
text: model.name,
|
||
fill: '#fff',
|
||
stroke: '#777',
|
||
lineWidth: 2.5,
|
||
fontSize: 12
|
||
}
|
||
}
|
||
});
|
||
graph.read(data);
|
||
|
||
var parent = document.getElementById('mountNode');
|
||
var img = document.createElement("img");
|
||
img.src = './assets/data/footer.png';
|
||
img.setAttribute('width', 130);
|
||
img.style.setProperty('margin', '0pt');
|
||
img.style.setProperty('margin-top', '400pt');
|
||
img.style.setProperty('position', 'absolute');
|
||
parent.appendChild(img);
|
||
|
||
var footer = document.createElement("a");
|
||
footer.style.setProperty('margin', '20pt');
|
||
footer.style.setProperty('margin-top', '485pt');
|
||
footer.style.setProperty('position', 'absolute');
|
||
footer.style.setProperty('color', 'rgb(126,131,139)');
|
||
footer.style.setProperty('text-decoration', 'none');
|
||
footer.innerHTML = '| 数据来源：2018 FIFA 官网';
|
||
footer.href = 'https://www.fifa.com/worldcup/';
|
||
parent.appendChild(footer);
|
||
});
|
||
|
||
|
||
</script>
|
||
|
||
</body>
|