test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-12 12:35:18 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
1591bdb301
g6/demos/system-graph-demo.html

2038 lines
68 KiB
HTML
Raw Normal View History

fix set fitview to true group position bug
2019-10-30 15:25:43 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>系统架构Demo</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<div class="timeControllerOuterContainer" >
<div id="timeControllerContainer" >
</div>
</div>
<div class="detailPannel">
<button id="btn_error">分析错误源节点</button>
<div id="infoDetail"></div>
</div>
<div class="description">
<p>
Demo说明：
</p>
<p>
本例用假数据展示了某次系统发生异常时，异常系统和其涉及系统的状态，其中发生异常的系统时红色的；
</p>
<p>
系统间依赖关系用边表示，出现问题的依赖也对应映射成红色；
</p>
<p>
标记出了疑似的问题源头系统，当点击右上角分析时，聚焦到该系统对应的节点上，并将系统近一小时的错误量作为扩展信息展示；
</p>
<p>
时序分析：下方时时间轴，某个时间点系统出现的错误数量，点击选择某个时间点，对应关系图切换到选择时间对应的数据（这里因为时示例，仅模拟了两个时刻的数据）;
</p>
</div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script src="https://cdn.bootcss.com/dagre/0.8.4/dagre.js"></script>
<script src="http://momentjs.cn/downloads/moment.min.js"></script>
<style>
#mountNode {
background:#001528;
}
.timeControllerOuterContainer{
text-align: center;
height: 100px;
background-color: beige;
position: relative;
background:#001528;
}
#timeControllerContainer{
position: absolute;
background-color: #002242;
position:absolute;
bottom:16px;
left: 50%;
text-align: center;
transform: translate(-50%, 0%);
padding-bottom: 10px;
padding-top: 10px;
}
.g6-tooltip {
border: 1px solid #e2e2e2;
border-radius: 4px;
font-size: 12px;
color: #545454;
background-color: rgba(255, 255, 255, 0.9);
padding: 10px 8px;
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}
.detailPannel{
position: absolute;
right: 64px;
top: 32px;
}
#btn_error{
color: white;
background: #f75a15;
border: 2px solid #f75a15;
border-radius: 6px;
cursor: pointer;
}
.description{
position: absolute;
left: 64px;
top: 12px;
color: white;
width: 250px;
font-size: 13px;
}
</style>
<script>
// ============================
// 大图假数据 1
const mockGraphData1 = {
"code": "0",
"data": {
"nodes": [
{
"app": "system1",
"abnormal": false,
"label": "system1",
"id": "system1"
},
{
"app": "system2",
"abnormal": false,
"label": "system2",
"id": "system2"
},
{
"app": "system3",
"abnormal": false,
"label": "system3",
"id": "system3"
},
{
"app": "system4",
"abnormal": false,
"label": "system4",
"id": "system4"
},
{
"app": "system5",
"abnormal": true,
"label": "system5",
"id": "system5"
},
{
"app": "system6",
"abnormal": false,
"label": "system6",
"id": "system6"
},
{
"app": "system7",
"abnormal": false,
"label": "system7",
"id": "system7"
},
{
"app": "system8",
"abnormal": false,
"label": "system8",
"id": "system8"
},
{
"app": "system9",
"abnormal": false,
"label": "system9",
"id": "system9"
},
{
"app": "source_system",
"abnormal": true,
"label": "source_system",
"id": "source_system"
},
{
"app": "system11",
"abnormal": false,
"label": "system11",
"id": "system11"
},
{
"app": "system12",
"abnormal": false,
"label": "system12",
"id": "system12"
},
{
"app": "system13",
"abnormal": true,
"label": "system13",
"id": "system13"
},
{
"app": "sysX",
"abnormal": false,
"label": "sysX",
"id": "sysX"
},
{
"app": "system15",
"abnormal": true,
"label": "system15",
"id": "system15"
},
{
"app": "sysZ",
"abnormal": false,
"label": "sysZ",
"id": "sysZ"
},
{
"app": "sysY",
"abnormal": false,
"label": "sysY",
"id": "sysY"
}
],
"edges": [
{
"abnormal": true,
"serviceList": [
"com.abcd.efghi.jk.service.apple.pear.banana.rice.noodle.tea.drink",
"com.abcd.efghi.jk.service.apple.pear.banana.rice.hi"
],
"source": "system3",
"target": "system13"
},
{
"abnormal": false,
"serviceList": [],
"source": "system6",
"target": "system5"
},
{
"abnormal": true,
"serviceList": [
"com.abcd.efghi.jk.service.apple.pear.banana.rice.fruit.eat.drink.findAll",
"com.abcd.efghi.jk.service.apple.pear.banana.rice.fruit.eat.drink.findAllList"
],
"source": "system7",
"target": "source_system"
},
{
"abnormal": true,
"serviceList": [
"com.abcd.efghi.jk.service.apple.pear.banana.rice.fruit.eat.drink.findAllList"
],
"source": "source_system",
"target": "source_system"
},
{
"abnormal": true,
"serviceList": [
"com.abcd.efghi.jk.service.apple.pear.banana.james.kobe.allen"
],
"source": "system5",
"target": "source_system"
},
{
"abnormal": true,
"serviceList": [
"com.abcd.efghi.jk.service.apple.pear.banana.playBall"
],
"source": "system12",
"target": "source_system"
},
{
"abnormal": false,
"serviceList": [],
"source": "system7",
"target": "system9"
},
{
"abnormal": false,
"serviceList": [],
"source": "system1",
"target": "system11"
},
{
"abnormal": false,
"serviceList": [],
"source": "system9",
"target": "system6"
},
{
"abnormal": true,
"serviceList": [
"com.abcd.efghi.jk.service.apple.pear.banana.james.kobe.allen"
],
"source": "system8",
"target": "system5"
},
{
"abnormal": true,
"serviceList": [
"com.abcd.efghi.jk.service.apple.pear.banana.james.kobe.allen",
"com.abcd.efghi.jk.service.apple.pear.banana.james.kobe.allen"
],
"source": "system8",
"target": "source_system"
},
{
"abnormal": false,
"serviceList": [],
"source": "sysX",
"target": "system1"
},
{
"abnormal": false,
"serviceList": [],
"source": "system11",
"target": "system8"
},
{
"abnormal": false,
"serviceList": [],
"source": "system7",
"target": "system11"
},
{
"abnormal": true,
"serviceList": [
"com.abcd.efghi.jk.service.apple.pear.banana.james.kobe.allen"
],
"source": "system13",
"target": "system15"
},
{
"abnormal": false,
"serviceList": [],
"source": "system9",
"target": "system2"
},
{
"abnormal": false,
"serviceList": [],
"source": "sysZ",
"target": "sysY"
},
{
"abnormal": false,
"serviceList": [],
"source": "system4",
"target": "sysX"
},
{
"abnormal": false,
"serviceList": [],
"source": "sysY",
"target": "system11"
},
{
"abnormal": true,
"serviceList": [
"com.abcd.efghi.jk.service.apple.pear.banana.james.kobe.allen"
],
"source": "system2",
"target": "source_system"
},
{
"abnormal": true,
"serviceList": [
"com.abcd.efghi.jk.service.apple.pear.banana.james.kobe.cater"
],
"source": "system6",
"target": "source_system"
},
{
"abnormal": false,
"serviceList": [],
"source": "system7",
"target": "system12"
},
{
"abnormal": false,
"serviceList": [],
"source": "sysZ",
"target": "system7"
},
{
"abnormal": false,
"serviceList": [],
"source": "system7",
"target": "system2"
}
]
},
"errorMsg": "",
"success": true,
"successMsg": ""
};
// ============================
// 大图假数据 2
const mockGraphData2 = {
"code": "0",
"data": {
"nodes": [
{
"app": "system1",
"abnormal": false,
"label": "system1",
"id": "system1"
},
{
"app": "source_system",
"abnormal": true,
"label": "source_system",
"id": "source_system"
},
{
"app": "system3",
"abnormal": false,
"label": "system3",
"id": "system3"
},
{
"app": "system4",
"abnormal": false,
"label": "system4",
"id": "system4"
},
{
"app": "system5",
"abnormal": false,
"label": "system5",
"id": "system5"
},
{
"app": "system6",
"abnormal": false,
"label": "system6",
"id": "system6"
},
{
"app": "system7",
"abnormal": false,
"label": "system7",
"id": "system7"
}
],
"edges": [
{
"abnormal": false,
"serviceList": [],
"source": "system7",
"target": "system6"
},
{
"abnormal": true,
"serviceList": [
"com.abcd.ef.ghi.jklmn.service.abcd.efg.api.x1234.y12345"
],
"source": "system7",
"target": "source_system"
},
{
"abnormal": false,
"serviceList": [],
"source": "system1",
"target": "system7"
},
{
"abnormal": false,
"serviceList": [],
"source": "system5",
"target": "system1"
},
{
"abnormal": false,
"serviceList": [],
"source": "system6",
"target": "system3"
},
{
"abnormal": false,
"serviceList": [],
"source": "system4",
"target": "system5"
},
]
},
"errorMsg": "",
"success": true,
"successMsg": ""
};
// 节点详细假数据
const appDetail = [
{
"count": "0",
"time": "1570995300000",
"type": "0015"
},
{
"count": "2",
"time": "1570995360000",
"type": "0015"
},
{
"count": "3",
"time": "1570995420000",
"type": "0015"
},
{
"count": "0",
"time": "1570995480000",
"type": "0015"
},
{
"count": "1",
"time": "1570995540000",
"type": "0015"
},
{
"count": "12",
"time": "1570995600000",
"type": "0015"
},
{
"count": "12",
"time": "1570995660000",
"type": "0015"
},
{
"count": "14",
"time": "1570995720000",
"type": "0015"
},
{
"count": "16",
"time": "1570995780000",
"type": "0015"
},
{
"count": "12",
"time": "1570995840000",
"type": "0015"
},
{
"count": "14",
"time": "1570995900000",
"type": "0015"
},
{
"count": "15",
"time": "1570995960000",
"type": "0015"
},
{
"count": "16",
"time": "1570996020000",
"type": "0015"
},
{
"count": "12",
"time": "1570996080000",
"type": "0015"
},
{
"count": "9",
"time": "1570996140000",
"type": "0015"
},
{
"count": "16",
"time": "1570996200000",
"type": "0015"
},
{
"count": "17",
"time": "1570996260000",
"type": "0015"
},
{
"count": "20",
"time": "1570996320000",
"type": "0015"
},
{
"count": "22",
"time": "1570996380000",
"type": "0015"
},
{
"count": "19",
"time": "1570996440000",
"type": "0015"
},
{
"count": "18",
"time": "1570996500000",
"type": "0015"
},
{
"count": "16",
"time": "1570996560000",
"type": "0015"
},
{
"count": "17",
"time": "1570996620000",
"type": "0015"
},
{
"count": "16",
"time": "1570996680000",
"type": "0015"
},
{
"count": "17",
"time": "1570996740000",
"type": "0015"
},
{
"count": "19",
"time": "1570996800000",
"type": "0015"
},
{
"count": "21",
"time": "1570996860000",
"type": "0015"
},
{
"count": "22",
"time": "1570996920000",
"type": "0015"
},
{
"count": "23",
"time": "1570996980000",
"type": "0015"
},
{
"count": "20",
"time": "1570997040000",
"type": "0015"
},
{
"count": "18",
"time": "1570997100000",
"type": "0015"
},
{
"count": "12",
"time": "1570997160000",
"type": "0015"
},
{
"count": "12",
"time": "1570997220000",
"type": "0015"
},
{
"count": "12",
"time": "1570997280000",
"type": "0015"
},
{
"count": "13",
"time": "1570997340000",
"type": "0015"
},
{
"count": "14",
"time": "1570997400000",
"type": "0015"
},
{
"count": "17",
"time": "1570997460000",
"type": "0015"
},
{
"count": "12",
"time": "1570997520000",
"type": "0015"
},
{
"count": "19",
"time": "1570997580000",
"type": "0015"
},
{
"count": "10",
"time": "1570997640000",
"type": "0015"
},
{
"count": "9",
"time": "1570997700000",
"type": "0015"
},
{
"count": "3",
"time": "1570997760000",
"type": "0015"
},
{
"count": "2",
"time": "1570997820000",
"type": "0015"
},
{
"count": "1",
"time": "1570997880000",
"type": "0015"
},
{
"count": "0",
"time": "1570997940000",
"type": "0015"
},
{
"count": "1",
"time": "1570998000000",
"type": "0015"
},
{
"count": "0",
"time": "1570998060000",
"type": "0015"
},
{
"count": "0",
"time": "1570998120000",
"type": "0015"
},
{
"count": "0",
"time": "1570998180000",
"type": "0015"
},
{
"count": "0",
"time": "1570998240000",
"type": "0015"
},
{
"count": "0",
"time": "1570998300000",
"type": "0015"
},
{
"count": "1",
"time": "1570998360000",
"type": "0015"
},
{
"count": "0",
"time": "1570998420000",
"type": "0015"
},
{
"count": "0",
"time": "1570998480000",
"type": "0015"
},
{
"count": "0",
"time": "1570998540000",
"type": "0015"
},
{
"count": "0",
"time": "1570998600000",
"type": "0015"
},
{
"count": "0",
"time": "1570998660000",
"type": "0015"
},
{
"count": "2",
"time": "1570998720000",
"type": "0015"
},
{
"count": "0",
"time": "1570998780000",
"type": "0015"
},
{
"count": "0",
"time": "1570998840000",
"type": "0015"
},
{
"count": "0",
"time": "1570998900000",
"type": "0015"
}
];
// G6注册样式
const LABEL_TAG = 'LABEL_TAG';
const ADD_TAG = 'ADD_TAG';
const BALL_TAG = 'BALL_TAG';
const TOOLTIP_TAG = 'TOOLTIP_TAG';
// 节点样式的配置参数定义
const NODE_CONFIG = {
// 大圆
nodesRadius:15, // 点的半径
colorHealthy:'#1563FF', // 正常颜色
colorError:'#f75a15', // 非正常颜色
fadedOpacity:0.2, // 褪色了的透明度数
commenOpacity:1, // 正常的了的透明度数
// 大院的聚焦状态
foucsRadusMin:18, // 聚焦状态的指示圆最小半径
foucsRadusMax:25, // 聚焦状态的指示圆最大半径
foucsColor:'lightgray',
foucsOpacity:0.4,
foucsWidth:0.4,
foucsAnimateDelay:800,
// 文本
labalFontSize:10,
labalFontSizeFaded:5,
labalFontFillColor:'#fff',
labalFontStrokeColorHealthy:"#2529e8",
labalFontStrokeColorError:"#f75a15",
// 细节信息
sectionCount:60, // 圆周细化的区域数
// 时间指示器
timeIndicatorstartRadius:100, // 起始半径
timeIndicatorEndRadius:100.5, // 终点半径
timeIndicatorHoverOffset: 4 , // hover时候的终点半径
timeIndicatorColor:'lightgray',
dataSectionColorDataOpacity:0.7,
timeIndicatorAnimateDelay:1200,
timeIndicatorHoverEnterAnimateDelay:50,
timeIndicatorHoverLeaveAnimateDelay:250,
// 时间提示
timeTextOffsetX:0, // X方面偏移
timeTextOffsetY:8, // Y方面偏移
timeTextRadius:115, // 文字距离中心的半径
timeTextFontSize:9, // 文字大小
timeTextFontWeight:1, //粗细
timeTextColor:"white", // 颜色
timeTextHideOpacity:0, // 隐藏时透明度（已废弃）
timeTextShowOpacity:0.7, // 显示透明度
//数据
dataSectionStartRaduis:25, // 数据部分的起始半径
dataSectionEndRaduis:80, // 数据部分的终至半径
dataBarWidthAngle:2, // 数据的宽度
dataSectionColorBG:'white',
dataSectionColorBGOpacity:0.2,
dataSectionColorData:'#A8071A',
dataSectionColorDataOpacity:0.7,
dataSectionAnimateDelay:1200,
// 开始位置标记
makerStartColor:'lightgray',
makerStartOpacity:0.7,
makerStartPositionX:0,
makerStartPositionY:-101,
makerStartRaduis: 2,
// 关闭详情（细节）按钮
closeBtnPositionX:0,
// closeBtnPositionY:11,
closeBtnPositionY:-130,
closeBtnFontSize:8,
closeBtnHoverFontSize:10,
closeBtnOpacity:1,
closeBtnFontWeight:1,
closeBtnCommenColor:'red',
closeBtnHoverColor:'white',
hoverAnimateTime:100,
};
// 边样式的配置参数定义
const EDGE_CONFIG = {
// 虚线设置
DASH:{
dashArray:[
[0,1],
[0,2],
[1,2],
[0,1,1,2],
[0,2,1,2],
[1,2,1,2],
[2,2,1,2],
[3,2,1,2],
[4,2,1,2]
],
lineDash:[4, 2, 1, 2],
interval:9,
},
// 特殊线的横向偏移量，这个值越大，特殊线的弧度越大
specialArcOffsetX: 30,
// 正常颜色
colorOk:'#ccc',
// 异常颜色
colorAbnoraml:'#A8071A',
// 正常线宽
lineWidthCommon: 1.6,
// Hover时增长线宽
lineWidthHoverIncrease: 2,
// 正常透明度
opacityCommon:0.7,
// faded状态的透明度数
opacityFaded:0.1,
// Hover时透明度
opacityHover:0.9,
// 边上的错误提示半径
errorTipRadius:5,
// 边上的错误外部圆提示颜色
errorTipBallColor:"#A8071A",
// 边上的错误文本文字大小
errorTipTextFontSize:10,
// 边上的错误文本颜色
errorTipTextColor:"white",
errorTipTextFontWeight:600,
errorTipTextAlign: 'center',
errorTipTextBaseline: 'center',
// 流动的指示小球
// 颜色
flowingBallColorCommon:'darkgray',
flowingBallColorAbnormal:'#A8071A',
// 半径
flowingBallRadius:2,
// 时间间隔
flowingTimeInterval:3000,
};
// 调用函数注册样式
// 节点
registerNodesStyle();
// 边
registerEdgesStyle();
let data = mockGraphData1.data;
// 图的尺寸定义 （canvas大小）
window.graphSize = {
width: window.innerWidth,
height: window.innerHeight - 110,
}
// 构造G6对象
const graph = new G6.Graph({
container: 'mountNode',
width: window.graphSize.width,
height: window.graphSize .height,
autoPaint: true,
modes: {
default: ['drag-canvas', {
type: 'zoom-canvas',
sensitivity: 0.8
}, {
type: 'edge-tooltip',
formatText: function formatText(model) {
console.log('model', model)
const { serviceList=[] } = model;
if(serviceList.length === 0){
return "链路无异常"
}
let text = '异常链路是:<br> ' + serviceList.map(item =>(item + '<br>' ));
return text;
},
shouldUpdate: function shouldUpdate(e) {
return true;
}
}]
},
fitView: true
});
window.graph = graph;
// 布局数据
// 使用dagre
const layoutedData = layoutByDagre(data);
// 给数据添加样式
// 原始数据中没有shape属性
const styledData = addDataStyle(layoutedData);
// 读取并绘制
window.graph.read(styledData);
/** 更新数据的方法 */
function updateGraph(data){
if(data.nodes.length === 0){
window.graph.clear();
}
const layoutedData = layoutByDagre(data);
const styledData = addDataStyle( layoutedData );
window.graph.read(styledData);
}
/** 使用dagre 布局的函数 */
function layoutByDagre(data){
const { nodes, edges } = data;
const g = new dagre.graphlib.Graph();
// 给dagre设置方向
g.setGraph({
rankdir: 'TB' // 表示方向，可以是TB, BT, LR, RL
});
g.setGraph({});
g.setDefaultEdgeLabel(function() { return {}; });
let labelNodeMap = {};
// 给dagre设置点和边
nodes.forEach((node) => {
g.setNode(node.id, {width: 60, height: 60});
labelNodeMap[node.id] = node;
});
edges.forEach(function(edge) {
g.setEdge(edge.source, edge.target);
});
// 布局
dagre.layout(g);
// 将布局信息，即x和y写入到原对象中
g.nodes().forEach(v => {
let originNode = labelNodeMap[v];
let layoutedNode = g.node(v);
originNode.x = layoutedNode.x;
originNode.y = layoutedNode.y;
});
// id -> point的映射
this.nodeIdPointObjMap = labelNodeMap;
return data;
}
/** 构造节点和边样式信息 */
function addDataStyle(data){
// 节点的样式
data.nodes.forEach(node =>{
node.shape = 'app-node-emergency';
});
// 边的样式
data.edges.forEach(edge =>{
edge.shape = 'ant-edge-emergency';
});
return data;
}
// ================================
// 节点样式注册
function registerNodesStyle(){
// app-node
G6.registerNode('app-node-emergency', {
draw:(cfg, group)=> {
const {abnormal} = cfg;
// 外侧圆形
const itemBox = group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: NODE_CONFIG.nodesRadius,
fill: abnormal ? NODE_CONFIG.colorError: NODE_CONFIG.colorHealthy, // 2529e8
},
});
// 文本
const labelShape = group.addShape('text', {
attrs: {
x: 0,
y: 2,
text: cfg.app,
fontSize: NODE_CONFIG.labalFontSize,
fill: NODE_CONFIG.labalFontFillColor,
fontWeight: 600,
textAlign: 'center',
textBaseline: 'center',
stroke: abnormal ? NODE_CONFIG.labalFontStrokeColorError : NODE_CONFIG.labalFontStrokeColorHealthy,
},
tag:LABEL_TAG,
})
return itemBox
},
afterDraw:(cfg, group)=> { },
setState:(name, value, item)=> {
const shape = item.get('keyShape');
const group = item.get('group');
switch (name) {
case 'faded':
if (value) {
shape.attr('opacity', NODE_CONFIG.fadedOpacity);
const labels = group.findAll(item => {
return item._cfg.tag && item._cfg.tag === LABEL_TAG;
});
labels.forEach(lable =>{
lable.attr('fontSize', NODE_CONFIG.labalFontSizeFaded);
})
}
else {
shape.attr('opacity', NODE_CONFIG.commenOpacity);
const labels = group.findAll(item => {
return item._cfg.tag && item._cfg.tag === LABEL_TAG;
});
labels.forEach(lable =>{
lable.attr('fontSize', NODE_CONFIG.labalFontSize);
})
}
break;
case 'focus':
if(value){ // 聚焦状态
addFocus(shape, item);
} else { // 移除
removeAdded(shape, item);
}
break;
case 'detailing':
if(value){ // 展示细节
addDetail(shape, item);
} else { // 移除
removeAdded(shape, item);
}
break;
}
},
}, 'circle');
// 移除菜单函数
const removeAdded = (shape, item)=>{
const group = shape.getParent();
// 移除所有添加
const addEle = group.findAll(item => {
return item._cfg.tag && item._cfg.tag === ADD_TAG;
});
addEle.forEach(ele => {
// group.removeChild(ele);
const type = ele._cfg.type;
if(type === 'fan'){ // 扇形的时候加上动画
ele.animate({
re: NODE_CONFIG.foucsRadusMin,
rs: NODE_CONFIG.foucsRadusMin,
repeat: false
}, 500, 'easeLinear', ()=>{
group.removeChild(ele);
});
} else {
group.removeChild(ele);
}
});
}
// 添加细节信息状态
const addDetail = (shape, item) =>{
if(appDetail.length === 0 ){
// 无详细数据或者数据中没有count字段
console.log('请求到的详情中没有可绘制字段...');
return;
}
const group = shape.getParent();
const { _cfg } = item;
// 计算区域角度
const perSectionAngle = (2 * Math.PI * (360 / NODE_CONFIG.sectionCount)) / 360;
const startAngle = (-1) * (2 * Math.PI / 4); // -90度弧度制的，其实是12点钟方向
let currentAngle = startAngle;
const timeIndicatorArr = []; // 时间指示器的图像实例集合
const timeIndicatorTextArr = []; // 时间指示器的图像实例集合
const dataSectionBgArr = []; // 数据块背景图像实例集合
const dataSectionDataArr = []; // 数据块DATA的图像实例集合
// 绘制数据
// 分成两个部分
// 一个是：背景部分 ；另一个是数据部分
const dataBarWidthAngle = 2 * Math.PI * NODE_CONFIG.dataBarWidthAngle / 360; // 转化成弧度制
// 数据映射比例计算出来
let maxValue = Math.max(...appDetail.map(i=>(Number(i.count))));
// console.log('drawmaxValueing maxValue...', maxValue);
const dataRaduisScale = (NODE_CONFIG.dataSectionEndRaduis - NODE_CONFIG.dataSectionStartRaduis) / maxValue;
// appDetail
// const { projects }
// 拿到数据的最大值
for(let i = 0; i < NODE_CONFIG.sectionCount; i++ ){
// console.log('drawing data ...', i);
// 数据准备
const sectionCenterAngle = currentAngle + perSectionAngle / 2 ;
const realStartAngle = sectionCenterAngle - dataBarWidthAngle / 2;
const realEndAngle = sectionCenterAngle + dataBarWidthAngle / 2;
const thisStartAngle = currentAngle;
const thisEndAngle = currentAngle + perSectionAngle;
// 背景部分
const fanBg = group.addShape('fan', {
attrs: {
x: 0,
y: 0,
rs: NODE_CONFIG.dataSectionStartRaduis,
re: NODE_CONFIG.dataSectionEndRaduis,
startAngle: realStartAngle,
endAngle: realEndAngle,
clockwise: false,
// stroke: NODE_CONFIG.timeIndicatorColor,
fill: NODE_CONFIG.dataSectionColorBG,
opacity:NODE_CONFIG.dataSectionColorBGOpacity,
},
tag: ADD_TAG,
cursor: "pointer",
});
dataSectionBgArr.push(fanBg);
// 数据部分
// 数据映射
const odata = Number(appDetail[i].count);
const dataHeigth = odata * dataRaduisScale;
const dataRadusEnd = NODE_CONFIG.dataSectionStartRaduis + dataHeigth;
// console.log('odata', odata );
// console.log('dataHeigth', dataHeigth );
// console.log('dataRadusEnd', dataRadusEnd );
const fanData = group.addShape('fan', {
attrs: {
x: 0,
y: 0,
rs: NODE_CONFIG.dataSectionStartRaduis,
re: NODE_CONFIG.dataSectionStartRaduis,
startAngle: realStartAngle,
endAngle: realEndAngle,
clockwise: false,
// stroke: NODE_CONFIG.timeIndicatorColor,
fill: NODE_CONFIG.dataSectionColorData,
opacity:NODE_CONFIG.dataSectionColorDataOpacity,
},
tag: ADD_TAG,
cursor: "pointer",
});
fanData.animate({
re: dataRadusEnd,
repeat: false
}, NODE_CONFIG.dataSectionAnimateDelay);
// --------------------------不好用就注释
// 监听
const { time, count } = appDetail[i];
[fanData, fanBg].forEach(item=>{
item.on('mouseenter', function(evt) {
const fanTimer = timeIndicatorArr[i];
// 自身动画
fanTimer.animate({
rs: NODE_CONFIG.timeIndicatorstartRadius - NODE_CONFIG.timeIndicatorHoverOffset / 2,
re: NODE_CONFIG.timeIndicatorEndRadius + NODE_CONFIG.timeIndicatorHoverOffset / 2,
repeat: false
}, NODE_CONFIG.timeIndicatorHoverEnterAnimateDelay);
// 纵向指示器的变化
fanBg.animate({
startAngle: thisStartAngle,
endAngle: thisEndAngle ,
re: NODE_CONFIG.timeIndicatorstartRadius - NODE_CONFIG.timeIndicatorHoverOffset / 2,
repeat: false
}, NODE_CONFIG.timeIndicatorHoverEnterAnimateDelay);
// 提示文本
// 准备文本信息
// const { time, count } = appDetail[i];
const timeString = moment(Number(time)).format('YYYY-MM-DD HH:mm:ss');
const countString = `错误量 : ${count}`;
const textTimeX = NODE_CONFIG.timeTextRadius * Math.cos(sectionCenterAngle);
const textTimeY = NODE_CONFIG.timeTextRadius * Math.sin(sectionCenterAngle);
let textAlign = 'left';
if(textTimeX < 0){
textAlign = 'right';
}
// add 文本
// 用这种在on事件中addShape的方式比opacity改变的方式好在哪里？
// 这样避免一个opacity为0但实际元素存在，干扰操作的问题
group.addShape('text', {
attrs: {
x: textTimeX + NODE_CONFIG.timeTextOffsetX,
y: textTimeY + NODE_CONFIG.timeTextOffsetY,
text:`${timeString}\n${countString}`,
fontSize: NODE_CONFIG.timeTextFontSize,
fill: NODE_CONFIG.timeTextColor,
opacity:NODE_CONFIG.timeTextShowOpacity,
fontWeight: NODE_CONFIG.timeTextFontWeight,
textAlign: textAlign,
textBaseline: 'center',
// stroke: 'white',
},
tag:TOOLTIP_TAG,
});
});
item.on('mouseleave', function(evt) {
const fanTimer = timeIndicatorArr[i];
// 自身动画
fanTimer.animate({
rs: NODE_CONFIG.timeIndicatorstartRadius,
re: NODE_CONFIG.timeIndicatorEndRadius,
repeat: false
}, NODE_CONFIG.timeIndicatorHoverLeaveAnimateDelay);
// 径向指示动画
fanBg.animate({
startAngle: realStartAngle,
endAngle: realEndAngle ,
re: NODE_CONFIG.dataSectionEndRaduis ,
repeat: false
}, NODE_CONFIG.timeIndicatorHoverEnterAnimateDelay);
// 移除文字
const tooltips = group.findAll(item => {
return item._cfg.tag && item._cfg.tag === TOOLTIP_TAG;
});
tooltips.forEach(tooltip =>{
tooltip.remove();
})
});
})
// --------------------------不好用就注释 <--
dataSectionDataArr.push(fanData);
currentAngle += perSectionAngle;
}
// 绘制 时间指示器
for(let i = 0; i < NODE_CONFIG.sectionCount; i++ ){
const odata = appDetail[i];
// 数据准备
const bkGraphObj = dataSectionBgArr[i];
const dataGraphObj = dataSectionDataArr[i];
const thisStartAngle = currentAngle;
const thisEndAngle = currentAngle + perSectionAngle;
const sectionCenterAngle = currentAngle + perSectionAngle / 2 ;
const realStartAngle = sectionCenterAngle - dataBarWidthAngle / 2;
const realEndAngle = sectionCenterAngle + dataBarWidthAngle / 2;
// 小扇形
const fanTimer = group.addShape('fan', {
attrs: {
x: 0,
y: 0,
rs: NODE_CONFIG.timeIndicatorstartRadius,
re: NODE_CONFIG.timeIndicatorEndRadius,
startAngle: currentAngle,
endAngle: currentAngle ,
clockwise: false,
// stroke: NODE_CONFIG.timeIndicatorColor,
fill: NODE_CONFIG.timeIndicatorColor,
opacity:NODE_CONFIG.dataSectionColorDataOpacity,
},
tag: ADD_TAG,
cursor: "pointer",
});
// 小扇形的动画
fanTimer.animate({
endAngle: currentAngle + perSectionAngle,
repeat: false
}, NODE_CONFIG.timeIndicatorAnimateDelay);
// 监听交互事件
fanTimer.on('mouseenter', function(evt) {
// 自身动画
fanTimer.animate({
rs: NODE_CONFIG.timeIndicatorstartRadius - NODE_CONFIG.timeIndicatorHoverOffset / 2,
re: NODE_CONFIG.timeIndicatorEndRadius + NODE_CONFIG.timeIndicatorHoverOffset / 2,
repeat: false
}, NODE_CONFIG.timeIndicatorHoverEnterAnimateDelay);
// 纵向指示器的变化
bkGraphObj.animate({
startAngle: thisStartAngle,
endAngle: thisEndAngle ,
re: NODE_CONFIG.timeIndicatorstartRadius - NODE_CONFIG.timeIndicatorHoverOffset / 2,
repeat: false
}, NODE_CONFIG.timeIndicatorHoverEnterAnimateDelay);
// 提示文本
// 准备文本信息
const { time, count } = odata;
const timeString = moment(Number(time)).format('YYYY-MM-DD HH:mm:ss');
const countString = `错误量 : ${count}`;
const textTimeX = NODE_CONFIG.timeTextRadius * Math.cos(sectionCenterAngle);
const textTimeY = NODE_CONFIG.timeTextRadius * Math.sin(sectionCenterAngle);
let textAlign = 'left';
if(textTimeX < 0){
textAlign = 'right';
}
// add 文本
// 用这种在on事件中addShape的方式比opacity改变的方式好在哪里？
// 这样避免一个opacity为0但实际元素存在，干扰操作的问题
group.addShape('text', {
attrs: {
x: textTimeX + NODE_CONFIG.timeTextOffsetX,
y: textTimeY + NODE_CONFIG.timeTextOffsetY,
text:`${timeString}\n${countString}`,
fontSize: NODE_CONFIG.timeTextFontSize,
fill: NODE_CONFIG.timeTextColor,
opacity:NODE_CONFIG.timeTextShowOpacity,
fontWeight: NODE_CONFIG.timeTextFontWeight,
textAlign: textAlign,
textBaseline: 'center',
// stroke: 'white',
},
tag:TOOLTIP_TAG,
});
});
// 鼠标移开的事件监听
fanTimer.on('mouseleave', function(evt) {
// 自身动画
fanTimer.animate({
rs: NODE_CONFIG.timeIndicatorstartRadius,
re: NODE_CONFIG.timeIndicatorEndRadius,
repeat: false
}, NODE_CONFIG.timeIndicatorHoverLeaveAnimateDelay);
// 径向指示动画
bkGraphObj.animate({
startAngle: realStartAngle,
endAngle: realEndAngle ,
re: NODE_CONFIG.dataSectionEndRaduis ,
repeat: false
}, NODE_CONFIG.timeIndicatorHoverEnterAnimateDelay);
// 移除文字
const tooltips = group.findAll(item => {
return item._cfg.tag && item._cfg.tag === TOOLTIP_TAG;
});
tooltips.forEach(tooltip =>{
tooltip.remove();
})
});
// 图形引用入栈
timeIndicatorArr.push(fanTimer);
currentAngle += perSectionAngle;
}
// 绘制“关闭详情”提示文字
const closeText = "关闭扩展"
const closeBtn = group.addShape('text', {
attrs: {
x: NODE_CONFIG.closeBtnPositionX,
y: NODE_CONFIG.closeBtnPositionY,
text:closeText,
fontSize: NODE_CONFIG.closeBtnFontSize,
fill: NODE_CONFIG.closeBtnCommenColor,
opacity:NODE_CONFIG.closeBtnOpacity,
fontWeight: NODE_CONFIG.closeBtnCommenColor,
textAlign: 'center',
textBaseline: 'center',
cursor:"pointer",
// stroke: 'white',
},
tag:ADD_TAG,
});
closeBtn.on('click', ()=>{
// this.graphWapper.emit('close_detail', _cfg.id);
closeDetail();
});
closeBtn.on('mouseenter', ()=>{
closeBtn.animate({
fill: NODE_CONFIG.closeBtnHoverColor,
stroke: NODE_CONFIG.closeBtnHoverColor,
fontSize: NODE_CONFIG.closeBtnHoverFontSize,
repeat: false
}, NODE_CONFIG.hoverAnimateTime);
});
closeBtn.on('mouseleave', ()=>{
closeBtn.animate({
fill: NODE_CONFIG.closeBtnCommenColor,
fontSize: NODE_CONFIG.closeBtnFontSize,
stroke: null,
repeat: false
}, NODE_CONFIG.hoverAnimateTime);
});
// 绘制开始方向提示
const marker = group.addShape('marker', {
attrs: {
// x: NODE_CONFIG.makerStartPositionX,
// y: NODE_CONFIG.makerStartPositionY,
x:0,
y:0,
r: NODE_CONFIG.makerStartRaduis,
fill: NODE_CONFIG.makerStartColor,
symbol:'triangle',
opacity:NODE_CONFIG.makerStartOpacity
},
tag: ADD_TAG,
});
// 偏移和旋转这个marker
marker.rotate( - Math.PI / 6 )
marker.translate(NODE_CONFIG.makerStartPositionX, NODE_CONFIG.makerStartPositionY)
}
// 添加Focus的状态
const addFocus = (shape, item) => {
const group = shape.getParent();
const { _cfg } = item;
const foucsRing = group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: NODE_CONFIG.foucsRadusMax,
// fill: abnormal ? NODE_CONFIG.colorError: NODE_CONFIG.colorHealthy, // 2529e8
stroke:NODE_CONFIG.foucsColor,
lineWidth:NODE_CONFIG.foucsWidth,
opacity:NODE_CONFIG.foucsOpacity,
},
tag: ADD_TAG,
});
foucsRing.animate({
r: NODE_CONFIG.foucsRadusMin,
repeat: true,
}, NODE_CONFIG.foucsAnimateDelay);
};
}
// ================================
// 边样式注册
function registerEdgesStyle(){
if(!G6){
return;
}
const dashArray = EDGE_CONFIG.DASH.dashArray;
const lineDash = EDGE_CONFIG.DASH.lineDash;
const interval = EDGE_CONFIG.DASH.interval;
G6.registerEdge('ant-edge-emergency', {
draw: function draw(cfg, group) {
const startPoint = cfg.startPoint;
const endPoint = cfg.endPoint;
const centerPoint = {
x: startPoint.x + (endPoint.x - startPoint.x) / 2,
y: startPoint.y + (endPoint.y - startPoint.y) / 2
};
const controlPoint = {
x: startPoint.x,
y: (startPoint.y + centerPoint.y) / 2,
};
let specialArcOffsetX = EDGE_CONFIG.specialArcOffsetX;
const lineColor = cfg.abnormal ? EDGE_CONFIG.colorAbnoraml : EDGE_CONFIG.colorOk;
let path;
if(cfg.isSpecial){
if(endPoint.y < startPoint.y){
specialArcOffsetX *= (-1);
}
path = group.addShape("path", {
attrs: {
path: [["M", startPoint.x, startPoint.y], ["Q", centerPoint.x - specialArcOffsetX, centerPoint.y, endPoint.x , endPoint.y ], ],
stroke: lineColor,
lineWidth: EDGE_CONFIG.lineWidthCommon,
opacity:EDGE_CONFIG.opacityCommon,
endArrow: {
path: "M 4,0 L -4,-4 L -4,4 Z",
d: 5
}
}
});
} else {
path = group.addShape("path", {
attrs: {
path: [["M", startPoint.x, startPoint.y], ["Q", controlPoint.x , controlPoint.y, centerPoint.x, centerPoint.y], ["T", endPoint.x , endPoint.y ], ],
stroke: lineColor,
lineWidth: EDGE_CONFIG.lineWidthCommon,
opacity:EDGE_CONFIG.opacityCommon,
endArrow: {
path: "M 4,0 L -4,-4 L -4,4 Z",
d: 5
}
}
});
}
// 不正常的时候需要显示提示
if(cfg.abnormal){ //
let thePoint = {}; // 要显示的位置
if(cfg.isSpecial){
thePoint = {
x:centerPoint.x - specialArcOffsetX / 2,
y:centerPoint.y,
}
} else {
thePoint={
x: centerPoint.x,
y: centerPoint.y,
}
}
const itemBox = group.addShape('circle', {
attrs: {
x: thePoint.x,
y: thePoint.y,
r: EDGE_CONFIG.errorTipRadius,
fill: EDGE_CONFIG.errorTipBallColor, // 2529e8
opacity:EDGE_CONFIG.opacityCommon,
},
tag:BALL_TAG,
});
// 文本
const labelShape = group.addShape('text', {
attrs: {
x: thePoint.x,
y: thePoint.y + 2,
text: cfg.serviceList.length,
fontSize: EDGE_CONFIG.errorTipTextFontSize,
fill:EDGE_CONFIG.errorTipTextColor,
fontWeight: EDGE_CONFIG.errorTipTextFontWeight,
textAlign: EDGE_CONFIG.errorTipTextAlign,
textBaseline: EDGE_CONFIG.errorTipTextBaseline,
opacity:EDGE_CONFIG.opacityCommon,
// stroke: !isHealthy ? NODE_CONFIG.labalFontStrokeColorError : NODE_CONFIG.labalFontStrokeColorHealthy,
},
});
}
return path;
},
setState(name, value, item) {
const shape = item.get('keyShape');
const group = shape.getParent();
switch (name) {
case 'faded':
if (value) {
const opacity = EDGE_CONFIG.opacityFaded;
shape.attr('opacity', opacity);
const balls = group.findAll(item => {
return item._cfg.tag && item._cfg.tag === BALL_TAG;
});
balls.forEach(ball =>{
ball.attr('opacity', opacity);
})
}
else {
const opacity = EDGE_CONFIG.opacityCommon;
shape.attr('opacity', opacity);
const balls = group.findAll(item => {
return item._cfg.tag && item._cfg.tag === BALL_TAG;
});
balls.forEach(ball =>{
ball.attr('opacity', opacity);
})
}
break;
case 'hoverStyle':
const { _cfg } = item;
const { originStyle } = _cfg;
const { lineWidth } = originStyle;
const increaseWidth = EDGE_CONFIG.lineWidthHoverIncrease;
// console.log("_cfg", _cfg);
if (value) {
shape.attr({
lineWidth:lineWidth + increaseWidth,
opacity: EDGE_CONFIG.opacityHover,
})
}
else {
shape.attr({
lineWidth,
opacity: EDGE_CONFIG.opacityCommon,
})
}
break;
}
},
afterDraw(cfg, group) {
const shape = group.get('children')[0];
const startPoint = shape.getPoint(0);
const circle = group.addShape('circle', {
attrs: {
x: startPoint.x,
y: startPoint.y,
fill: cfg.abnormal?EDGE_CONFIG.flowingBallColorAbnormal:EDGE_CONFIG.flowingBallColorCommon,
r: 2
},
tag: BALL_TAG,
});
circle.animate({
onFrame(ratio) {
const tmpPoint = shape.getPoint(ratio);
return {
x: tmpPoint.x,
y: tmpPoint.y
};
},
repeat: true
}, EDGE_CONFIG.flowingTimeInterval);
const length = shape.getTotalLength(); // G 增加了 totalLength 的接口
let totalArray = [];
for (var i = 0; i < length; i += interval) {
totalArray = totalArray.concat(lineDash);
}
let index = 0;
shape.animate({
onFrame(ratio) {
const cfg = {
lineDash: dashArray[index].concat(totalArray)
};
index = (index + 1) % interval;
return cfg;
},
repeat: true
}, EDGE_CONFIG.flowingTimeInterval);
},
});
}
function focusOnNodePoint(id, zoomViewScale){
const { width, height } = window.graphSize;
const item = window.graph.findById(id);
const model = item.get('model');
const matrix = window.graph.get('group').getMatrix();
const x = model.x * matrix[0] + matrix[6];
const y = model.y * matrix[4] + matrix[7];
window.graph.translate(width / 2 - x, height / 2 - y);
if(zoomViewScale){
zoomByCenter(zoomViewScale);
}
}
function zoomByCenter(scale){
const { width, height } = this.graphSize;
const centerPosition = {x: width / 2, y: height / 2}
window.graph.zoom(scale / window.graph.getZoom(), centerPosition);
}
function fadeAllButOne(besideNodeId){
window.graph.getNodes().forEach(node =>{
const nodeid = node._cfg.id;
if(besideNodeId !== nodeid){
window.graph.setItemState(nodeid, 'faded', true);
}
});
window.graph.getEdges().forEach(edge =>{
const edgeid = edge._cfg.id;
window.graph.setItemState(edgeid, 'faded', true);
})
}
function showInitialGraph(){
window.graph.getNodes().forEach(node=>{
const nodeid = node._cfg.id;
window.graph.setItemState(nodeid, 'faded', false);
});
window.graph.getEdges().forEach(edge=>{
const edgeid = edge._cfg.id;
window.graph.showItem(edgeid);
window.graph.setItemState(edgeid, 'faded', false);
});
}
// 分析按钮的监听回调
document.getElementById('btn_error').addEventListener("click", ()=>{
// 模拟系统详情
document.getElementById('infoDetail').innerHTML = `
<div style="color: white;">
<p>source_system</p>
<hr >
<p>系统owner：cjj</p>
<p>系统等级：Level High</p>
<hr >
<p>问题原因是：XXX</p>
<p>最近趋势图：YYY</p>
<p>解决方案是：ZZZ</p>
</div>
`;
// 聚焦到节点
fadeAllButOne("source_system");
focusOnNodePoint("source_system", 2);
window.graph.setItemState("source_system", 'detailing', true);
});
function closeDetail(){
window.graph.setItemState("source_system", 'detailing', false);
showInitialGraph();
document.getElementById('infoDetail').innerHTML = '';
}
// =========================
// 时间轴部分
const timeMockData = [
{time: "23:07", value: 0, date: "2019-10-14", timeStamp: 1571065620000},
{time: "23:08", value: 0, date: "2019-10-14", timeStamp: 1571065680000},
{time: "23:09", value: 0, date: "2019-10-14", timeStamp: 1571065740000},
{time: "23:10", value: 0, date: "2019-10-14", timeStamp: 1571065800000},
{time: "23:11", value: 0, date: "2019-10-14", timeStamp: 1571065860000},
{time: "23:12", value: 0, date: "2019-10-14", timeStamp: 1571065920000},
{time: "23:13", value: 0, date: "2019-10-14", timeStamp: 1571065980000},
{time: "23:14", value: 0, date: "2019-10-14", timeStamp: 1571066040000},
{time: "23:15", value: 0, date: "2019-10-14", timeStamp: 1571066100000},
{time: "23:16", value: 0, date: "2019-10-14", timeStamp: 1571066160000},
{time: "23:17", value: 0, date: "2019-10-14", timeStamp: 1571066220000},
{time: "23:18", value: 0, date: "2019-10-14", timeStamp: 1571066280000},
{time: "23:19", value: 0, date: "2019-10-14", timeStamp: 1571066340000},
{time: "23:20", value: 0, date: "2019-10-14", timeStamp: 1571066400000},
{time: "23:21", value: 0, date: "2019-10-14", timeStamp: 1571066460000},
{time: "23:22", value: 0, date: "2019-10-14", timeStamp: 1571066520000},
{time: "23:23", value: 0, date: "2019-10-14", timeStamp: 1571066580000},
{time: "23:24", value: 0, date: "2019-10-14", timeStamp: 1571066640000},
{time: "23:25", value: 0, date: "2019-10-14", timeStamp: 1571066700000},
{time: "23:26", value: 0, date: "2019-10-14", timeStamp: 1571066760000},
{time: "23:27", value: 0, date: "2019-10-14", timeStamp: 1571066820000},
{time: "23:28", value: 0, date: "2019-10-14", timeStamp: 1571066880000},
{time: "23:29", value: 0, date: "2019-10-14", timeStamp: 1571066940000},
{time: "23:30", value: 0, date: "2019-10-14", timeStamp: 1571067000000},
{time: "23:31", value: 0, date: "2019-10-14", timeStamp: 1571067060000},
{time: "23:32", value: 0, date: "2019-10-14", timeStamp: 1571067120000},
{time: "23:33", value: 0, date: "2019-10-14", timeStamp: 1571067180000},
{time: "23:34", value: 0, date: "2019-10-14", timeStamp: 1571067240000},
{time: "23:35", value: 0, date: "2019-10-14", timeStamp: 1571067300000},
{time: "23:36", value: 0, date: "2019-10-14", timeStamp: 1571067360000},
{time: "23:37", value: 2, date: "2019-10-14", timeStamp: 1571067420000},
{time: "23:38", value: 11, date: "2019-10-14", timeStamp: 1571067480000},
{time: "23:39", value: 11, date: "2019-10-14", timeStamp: 1571067540000},
{time: "23:40", value: 11, date: "2019-10-14", timeStamp: 1571067600000},
{time: "23:41", value: 10, date: "2019-10-14", timeStamp: 1571067660000},
{time: "23:42", value: 0, date: "2019-10-14", timeStamp: 1571067720000},
{time: "23:43", value: 0, date: "2019-10-14", timeStamp: 1571067780000},
{time: "23:44", value: 0, date: "2019-10-14", timeStamp: 1571067840000},
{time: "23:45", value: 0, date: "2019-10-14", timeStamp: 1571067900000},
{time: "23:46", value: 0, date: "2019-10-14", timeStamp: 1571067960000},
{time: "23:47", value: 0, date: "2019-10-14", timeStamp: 1571068020000},
{time: "23:48", value: 0, date: "2019-10-14", timeStamp: 1571068080000},
{time: "23:49", value: 0, date: "2019-10-14", timeStamp: 1571068140000},
{time: "23:50", value: 0, date: "2019-10-14", timeStamp: 1571068200000},
{time: "23:51", value: 0, date: "2019-10-14", timeStamp: 1571068260000},
{time: "23:52", value: 0, date: "2019-10-14", timeStamp: 1571068320000},
{time: "23:53", value: 5, date: "2019-10-14", timeStamp: 1571068380000},
{time: "23:54", value: 5, date: "2019-10-14", timeStamp: 1571068440000},
{time: "23:55", value: 0, date: "2019-10-14", timeStamp: 1571068500000},
{time: "23:56", value: 0, date: "2019-10-14", timeStamp: 1571068560000},
{time: "23:57", value: 0, date: "2019-10-14", timeStamp: 1571068620000},
{time: "23:58", value: 0, date: "2019-10-14", timeStamp: 1571068680000},
{time: "23:59", value: 0, date: "2019-10-14", timeStamp: 1571068740000},
{time: "00:00", value: 0, date: "2019-10-15", timeStamp: 1571068800000},
{time: "00:01", value: 0, date: "2019-10-15", timeStamp: 1571068860000},
{time: "00:02", value: 0, date: "2019-10-15", timeStamp: 1571068920000},
{time: "00:03", value: 0, date: "2019-10-15", timeStamp: 1571068980000},
{time: "00:04", value: 0, date: "2019-10-15", timeStamp: 1571069040000},
{time: "00:05", value: 0, date: "2019-10-15", timeStamp: 1571069100000},
{time: "00:06", value: 0, date: "2019-10-15", timeStamp: 1571069160000},
{time: "00:07", value: 0, date: "2019-10-15", timeStamp: 1571069220000},
];
const TIME_CONTROLLER_CONFIG = {
// 模块整体宽度
width:640,
// 模块整体高
height:64,
// padding 边距
padding:{
top:4,
bottom:8,
left:8,
right:8,
},
// 控制按钮大小
controlButtonR:10,
// 时间轴轴线宽
axisLineWidth:2,
// 柱子区域的水平间距
barSectionPaddingH:8 ,
// 柱子间距
barPadding:2,
// icon 线的水平位置偏移
iconXOffset:2,
// icon 线的纵偏移
iconYOffset:5,
// icon 的线
iconStrokeWidth:1,
// 各种颜色定义
COLORS:{
// x轴
axis:"#597EF7",
// 控制按钮
controlBtn:"#69C0FF",
// 按钮上icon的颜色
iconInBtn:"#080C16",
}
};
const {
width,
height,
padding,
controlButtonR,
axisLineWidth,
barSectionPaddingH,
barPadding,
iconXOffset,
iconYOffset,
iconStrokeWidth,
COLORS,
} = TIME_CONTROLLER_CONFIG;
// 时间轴控制按钮位置计算
const leftControlButtonPosition = {
x: padding.left + controlButtonR,
y: height - padding.bottom - controlButtonR
};
const rightControlButtonPosition = {
x: width - padding.right - controlButtonR,
y: height - padding.bottom - controlButtonR
};
const barSectionHeight = height - padding.top - padding.bottom - axisLineWidth - controlButtonR;
const barSectionWidth = width - padding.left - padding.right - controlButtonR * 4 - barSectionPaddingH * 2;
// svg
const svg = d3.select('#timeControllerContainer')
.append("svg")
.attr("height", height)
.attr("width", width);
window.svg = svg;
// 画轴
svg.append('line')
.attr('x1', leftControlButtonPosition.x )
.attr('y1', leftControlButtonPosition.y )
.attr('x2', rightControlButtonPosition.x )
.attr('y2', rightControlButtonPosition.y )
.attr('stroke-width', axisLineWidth)
.attr('stroke', COLORS.axis);
// 控制器：left
const leftControlG = svg.append('g');
leftControlG.append('circle').attr('id', 'circleBtn')
.attr('r', controlButtonR)
.attr('cx', leftControlButtonPosition.x)
.attr('cy', leftControlButtonPosition.y)
.attr('fill', COLORS.controlBtn)
.style("cursor", "pointer");
leftControlG.append('line')
.attr('x1', leftControlButtonPosition.x + iconXOffset )
.attr('y1', leftControlButtonPosition.y - iconYOffset )
.attr('x2', leftControlButtonPosition.x - iconXOffset )
.attr('y2', leftControlButtonPosition.y )
.attr('stroke-width', iconStrokeWidth)
.attr('stroke', COLORS.iconInBtn)
.style("cursor", "pointer");
leftControlG.append('line')
.attr('x1', leftControlButtonPosition.x - iconXOffset )
.attr('y1', leftControlButtonPosition.y )
.attr('x2', leftControlButtonPosition.x + iconXOffset )
.attr('y2', leftControlButtonPosition.y + iconYOffset )
.attr('stroke-width', iconStrokeWidth)
.attr('stroke', COLORS.iconInBtn)
.style("cursor", "pointer");
// 左边button的点击回调
leftControlG.on('click', function(d){
// console.log('d3.select(this)', d3.select('#circleBtn').transition())
// d3.select(this)
// .select('#circleBtn')
// .transition() //要实现单元素连续动画就直接加在后面
// // .duration(100)
// .attr('r', controlButtonR + 2)
// .transition() //要实现单元素连续动画就直接加在后面
// .duration(100)
// .attr('r', controlButtonR );
// 点击回调
handleClickBtn('back');
});
// 控制器：right
const rightControlG = svg.append('g');
rightControlG.append('circle')
.attr('r', controlButtonR)
.attr('cx', rightControlButtonPosition.x)
.attr('cy', rightControlButtonPosition.y)
.attr('fill', COLORS.controlBtn)
.style("cursor", "pointer");
rightControlG.append('line')
.attr('x1', rightControlButtonPosition.x - iconXOffset )
.attr('y1', rightControlButtonPosition.y - iconYOffset )
.attr('x2', rightControlButtonPosition.x + iconXOffset )
.attr('y2', rightControlButtonPosition.y )
.attr('stroke-width', iconStrokeWidth)
.attr('stroke', COLORS.iconInBtn)
.style("cursor", "pointer");
rightControlG.append('line')
.attr('x1', rightControlButtonPosition.x + iconXOffset )
.attr('y1', rightControlButtonPosition.y )
.attr('x2', rightControlButtonPosition.x - iconXOffset )
.attr('y2', rightControlButtonPosition.y + iconYOffset )
.attr('stroke-width', iconStrokeWidth)
.attr('stroke', COLORS.iconInBtn)
.style("cursor", "pointer");
// 右边button的点击回调
rightControlG.on('click', (d)=>{
// 点击回调
handleClickBtn('front');
});
drawData( timeMockData );
function drawData( data ){
const lastIndex = data.length - 1;
const svg = window.svg;
const yScale = barSectionHeight / d3.max(data.map(i=>i.value))
const barsGroup = svg.append("g").attr("id", "oneBarGroup");
const oneBarGroup = barsGroup.selectAll("rect")
.data(data)
.enter()
.append("g");
// 背景
oneBarGroup.append("rect")
.attr('id', 'rect_bg')
.attr("x", (d, i)=>{
return i * (barSectionWidth / data.length) + padding.left + controlButtonR * 2 + barSectionPaddingH;
})
.attr("y", (d, i)=>{
return padding.top
})
.attr("width", barSectionWidth / data.length - barPadding )
.attr("height", barSectionHeight)
.attr("fill", "#597EF7")
.attr("opacity", 0.2)
.attr("stroke", "white")
.attr("stroke-width", (d, i) =>{
return i === lastIndex ? 2 : 0;
});
// bar
oneBarGroup.append("rect")
.attr('id', 'rect')
.attr("x", (d, i)=>{
return i * (barSectionWidth / data.length) + padding.left + controlButtonR * 2 + barSectionPaddingH;
})
.attr("y", (d, i)=>{
const maybeValue = barSectionHeight - d.value * yScale + padding.top;
const yValue = isNaN(maybeValue)? 0 : maybeValue;
return yValue;
})
.attr("width", barSectionWidth / data.length - barPadding )
.attr("height", (d, i)=>{
const maybeValue = d.value * yScale ;
const yValue = isNaN(maybeValue)? 0 : maybeValue;
return yValue;
})
.attr("fill", "#69C0FF")
.attr("opacity", 0.75)
.attr("stroke", "white")
.attr("stroke-width", (d, i) =>{
return i === lastIndex ? 2 : 0;
});
// 添加event
oneBarGroup
.style("cursor", "pointer")
.on('click', function(d){
let selectIdTag = '#rect';
if(d.value === 0){
selectIdTag = '#rect_bg';
}
// 更新选择状态
d3.selectAll('#rect_bg')
.style("stroke-width", 0);
d3.selectAll('#rect')
.style("stroke-width", 0);
//
const selectRect = d3.select(this).select(selectIdTag);
selectRect
.style("stroke-width", 2);
//
clickRectQuery(d);
})
.on("mouseover", function(d) {
const selectRect = d3.select(this).select('#rect');
selectRect.style("opacity", 1);
// console.log(d3.select(this).select('#rect').nodes())
// console.log(d3.event)
const { offsetX, offsetY } = d3.event;
setTooltipState({
isTooltipVisable:true,
toolTipData:selectRect.nodes()[0].__data__,
relativePosition:{
x:offsetX,
y:offsetY,
},
});
})
.on("mouseout", function(d) {
d3.select(this).select('#rect').style("opacity", 0.75);
setTooltipState({
isTooltipVisable:false,
});
});
// text
const textAxisGroup = svg.append('g').attr("id", "textAxisGroup");
textAxisGroup.selectAll("rect")
.data(data)
.enter()
.append("g")
.append("text")
.attr("fill","white")
.attr("font-size","12px")
.attr("text-anchor","middle")
.attr("x",function(d,i){ //与矩形的X坐标一样
return i * (barSectionWidth / data.length) + padding.left + controlButtonR * 2 + barSectionPaddingH + 8
})
.attr("y",function(d){
return barSectionHeight + 20 + padding.top
})
.text(function(d, i){ //要显示的文字内容
if(i % 6 === 0){
return d.time
}
return '';
});
// mouse enter的回调
const setTooltipState = ({isTooltipVisable, toolTipData, relativePosition})=>{
};
const clickRectQuery = (d) =>{
updateGraph(mockGraphData2.data);
}
}
</script>
</body>
</html>
Reference in New Issue Copy Permalink