var data = { element:[{ image: 'img/work.png', pos:[1,1], // 圖片位置 linePoint:[], // 圖片發(fā)出線段坐標(biāo)數(shù)組 lineDir:0, // 線段動(dòng)畫方向 title: '工作' }], lineColor:'black', // 連線顏色 animateColor: 'red', // 動(dòng)畫顏色};var chart = new Myd3chart('#chart');chart.lineChart(data);

.animate-line{ fill: none; stroke-width: 1; stroke-dasharray: 50 100; stroke-dashoffset: 0; animation: stroke 6s infinite linear;}@keyframes stroke { 100% { stroke-dashoffset: 500; /* 如果反向移動(dòng)改為-500 */ }}

// 統(tǒng)計(jì)接入點(diǎn) function findAccessPoint() { var accessPoints = []; // 記錄每個(gè)線段上的接入點(diǎn)，data為配置數(shù)據(jù) data.eles.forEach(function(d, i){ if(d.line.length == 0){ return; } var acsp = { name: d.title.text, ap: [], // 接入點(diǎn),按順序排列，頭部離開始點(diǎn)近 }; // 本線段上，每兩相鄰的點(diǎn)作為一個(gè)元素存入數(shù)組 var linePair = []; // 本線段起始點(diǎn) var startPos = d.line[0]; d.line.forEach(function(dd, di){ if(d.line[di+1]){  var pair = {  start: dd,  end: d.line[di+1]  };  linePair.push(pair); }  }); // 對(duì)每兩相鄰的點(diǎn)，查找接入點(diǎn) linePair.forEach(function(dd, di){ chartData.eles.forEach(function(ddd, ddi){  // 排除自己，查找自己線段上的接入點(diǎn)  if(i != ddi && ddd.line.length > 1){  // 得到此線段終點(diǎn)  var pos = ddd.line[ddd.line.length - 1];  // dd.start開始點(diǎn),dd.end結(jié)束點(diǎn)  // 用x坐標(biāo)計(jì)算在本線段上的y坐標(biāo)，再和實(shí)際的y坐標(biāo)比較  var computeY = dd.start[1] +   (pos[0] - dd.start[0])*(dd.end[1] - dd.start[1])/(dd.end[0] - dd.start[0]);  var dif = Math.abs(computeY - pos[1]);  // 如果誤差在2以內(nèi)，并且此線終點(diǎn)在當(dāng)前線起點(diǎn)和終點(diǎn)之間  // 認(rèn)為此點(diǎn)為接入點(diǎn)  if(dif < 2 && (  (  ((pos[0] > dd.start[0]) && (pos[0] < dd.end[0])) ||  ((pos[0] < dd.start[0]) && (pos[0] > dd.end[0]))  ) && (  ((pos[1] > dd.start[1]) && (pos[1] < dd.end[1])) ||  ((pos[1] < dd.start[1]) && (pos[1] > dd.end[1]))  )  )) {  var dis = Math.pow((pos[0] - startPos[0]),2) + Math.pow((pos[1] - startPos[1]),2);  var ap = {  name: ddd.title.text,  ap: pos,  distance: dis, // 距離起始點(diǎn)的距離  allNames: [], // 所有通過此接入點(diǎn)的站點(diǎn)名稱  }  acsp.ap.push(ap);    }  } }); }) accessPoints.push(acsp); }); //對(duì)所有的接入點(diǎn)，按與起始點(diǎn)的距離排序，并查找此接入點(diǎn)的上層站點(diǎn) accessPoints.forEach(function(d, i){ // 按distance由小到大排序 d.ap.sort(function(a, b){ return a.distance - b.distance; }); // 查找每個(gè)接入點(diǎn)的上層站點(diǎn) d.ap.forEach(function(dd, di){ findPoint(dd.name, dd.allNames); }); }); // name是接入點(diǎn)名稱，arr是該接入點(diǎn)的allNames function findPoint(name, arr){ accessPoints.forEach(function(d, i){ // 在數(shù)組中找到指定名稱的項(xiàng) if(d.name === name){  if(d.ap.length>0){  // 把該項(xiàng)下面的ap中的名稱加入給定arr  d.ap.forEach(function(dd, di){  arr.push(dd.name);  // 如果該點(diǎn)內(nèi)的allNames已經(jīng)有值則直接加入  if(dd.allNames.length>0){  dd.allNames.forEach(function(d, i){   arr.push(d);  });  } else{  // 遞歸查找子接入點(diǎn)  findPoint(dd.name, arr);  }  });  } else {  return;  } }else{  return; } }); } }

// 更新線條動(dòng)畫 aniLine.each(function(d, i){ var curLine = d3.select(this); // 找到對(duì)應(yīng)的動(dòng)畫line if (dd.name === curLine.attr('tag')) {  // 處理動(dòng)畫是否運(yùn)行  if (dd.ani) {  // 此線條動(dòng)畫運(yùn)行  curLine.style('animation-play-state', 'running');  curLine.style('display', 'inline');  // 如果動(dòng)畫運(yùn)行，則恢復(fù)原始動(dòng)畫路徑  curLine.attr('d', function(d){  return line(chartData.eles[i].line);  });  } else {  // 此線條動(dòng)畫停止  // 先查找離本線段開始點(diǎn)最近的接入點(diǎn)  var acp = accessPoints;  // 從accessPoints中找到本節(jié)點(diǎn)的接入點(diǎn)集合  var ap = [];  acp.forEach(function(acd, aci){  if(acd.name === dd.name){  ap = acd.ap;  }  });    // 最近有動(dòng)畫接入點(diǎn)序號(hào)  var acIndex = -1;  // 找到最近的有動(dòng)畫接入點(diǎn)，遠(yuǎn)近按數(shù)組序號(hào)遞增  for(var j=0;j<ap.length;j++){  // 復(fù)制所有子接入點(diǎn)數(shù)組  var allNames = ap[j].allNames.concat();  // 將接入點(diǎn)名稱也加入  allNames.push(ap[j].name);  // 判斷此接入點(diǎn)樹中是否有動(dòng)畫，如果1個(gè)有就可以  allNames.forEach(function(name,ani){  data.forEach(function(datad, datai){   if(datad.name === name){   if(datad.ani){   acIndex = j;   return;   }   }  });  });  if(acIndex != -1) {  break;  }  }  // 如果存在有動(dòng)畫接入點(diǎn)  if(acIndex != -1){  curLine.style('animation-play-state', 'running');  curLine.style('display', 'inline');  curLine.attr('d', function(d){  var accp = ap[acIndex].ap;  var curLine = data.element[i].line.concat();  // 接入節(jié)點(diǎn)與開始點(diǎn)的距離  var disAp = Math.pow((accp[0] - curLine[0][0]),2) +  Math.pow((accp[1] - curLine[0][1]),2);  // 如果當(dāng)前線段中有離開始節(jié)點(diǎn)比接入點(diǎn)近的節(jié)點(diǎn)  // 則刪除此節(jié)點(diǎn)  curLine.forEach(function(curld, curli){   if(curli > 0){   var dis = Math.pow((curld[0] - curLine[0][0]),2) +   Math.pow((curld[1] - curLine[0][1]),2);   if(dis < disAp){   // 刪除此點(diǎn)   curLine.splice(curli,1);   }   }  });  // 從此接入點(diǎn)處開始動(dòng)畫  curLine.splice(0,1,accp);  // debugger;  return line(curLine);  });  }else{  // 此線條動(dòng)畫停止  curLine.style('animation-play-state', 'paused');  curLine.style('display', 'none');  }  } }

// 拖動(dòng)圖標(biāo) var draging = d3.drag() .on('drag', function () { // 當(dāng)長寬相同時(shí),iconSize是圖標(biāo)大小[寬，高] var move = iconSize[0] / 2,  moveSubBg = [25, 53.5], moveTitle = [25, 50]; var g = d3.select(this),  eventX = d3.event.x - move,  eventY = d3.event.y - move; // 設(shè)定圖標(biāo)位置 g.select('.image')  .attr('x', eventX)  .attr('y', eventY); }) // 拖拽結(jié)束 .on('end', function () { var g = d3.select(this); g.select('.subBg')  .attr('transform', function (d, i) {  // 對(duì)子標(biāo)簽的處理，自動(dòng)符合字符串長度  var x = parseFloat(d3.select(this).attr('x')) + parseFloat(d3.select(this).attr('width')) / 2,  // y沒被縮放，所以不用處理  y = d3.select(this).attr('y'),  dsl = (d.title.subTitle.text + '').length;  var scaleX = dsl * 5.5;  return 'translate(' + x + ' ' + y + ') scale(' + scaleX + ', 1) translate(' + -x + ' ' + -y + ')';  }); }); // 圖標(biāo)組增加拖動(dòng)事件 imageGs.call(draging);

// 鼠標(biāo)移動(dòng)時(shí)，實(shí)時(shí)畫線到鼠標(biāo)當(dāng)前位置，_bodyRect為主區(qū)域 _bodyRect.on('mousemove', function(){ // 如果不處于實(shí)時(shí)畫線狀態(tài) if(!_chartData.drawing){ return; } // 如果沒有端點(diǎn)名稱 if (!_chartData.linePrePare.name) { return; } /* 實(shí)時(shí)畫線 */ // 判斷線段傾斜方向,linePrePare為線段臨時(shí)存儲(chǔ) var preLines = linePrePare.lines; var mousePos = d3.mouse(_bodyRect.node()), beforePos = preLines[preLines.length - 1], newy, newPos = []; if((mousePos[0]>beforePos[0] && mousePos[1]>beforePos[1]) || (mousePos[0]<beforePos[0] && mousePos[1]<beforePos[1])){ // 向左傾斜/ 左上到右下：y = cy + 0.7*(x-cx) newy = beforePos[1] + 0.7 * (mousePos[0] - beforePos[0]); } else { // 向右傾斜/ 左下到右上：y = cy - 0.7*(cx-x) newy = beforePos[1] - 0.7 * (mousePos[0] - beforePos[0]); } newPos = [mousePos[0], newy]; // 移除舊線 if(_chartData.tempLine.line){ _chartData.tempLine.pos = []; _chartData.tempLine.line.remove(); } // 畫新線，tempLine為實(shí)時(shí)畫線的臨時(shí)存儲(chǔ) _chartData.tempLine.line = _chartData.lineRootG.append('path') .attr('class', 'line-path') .attr('stroke', chartData.line.color) .attr('stroke-width', chartData.line.width) .attr('fill', 'none') .attr('d', function () {  var newLine = [  preLines[preLines.length - 1],  newPos  ];  _chartData.tempLine.pos = newPos;  return line(newLine); }); // 當(dāng)鼠標(biāo)移入某個(gè)建筑圖標(biāo)范圍時(shí) _chartData.imageGs.on('mouseenter', function(d, i){ // 移除舊線 if(_chartData.tempLine.line){  _chartData.tempLine.pos = [];  _chartData.tempLine.line.remove(); } // 得到圖標(biāo)中心點(diǎn)坐標(biāo) var posX = parseFloat(d3.select(this).select('.image').attr('x')) + _chartConf.baseSize[0] / 2; var posY = parseFloat(d3.select(this).select('.image').attr('y')) + _chartConf.baseSize[1] / 2; // 將此建筑圖標(biāo)的中心點(diǎn)坐標(biāo)作為終點(diǎn)坐標(biāo)畫線 _chartData.tempLine.line = _chartData.lineRootG.append('path')  .attr('class', 'line-path')  .attr('stroke', chartData.line.color)  .attr('stroke-width', chartData.line.width)  .attr('fill', 'none')  .attr('d', function () {  var newLine = [  preLines[preLines.length - 1],  [posX,posY]  ];  _chartData.tempLine.pos = [posX,posY];  return line(newLine);  }); }); // 當(dāng)鼠標(biāo)移出圖標(biāo)區(qū)域 _chartData.imageGs.on('mouseleave', function(d, i){ // 移除舊線 if(_chartData.tempLine.line){  _chartData.tempLine.pos = [];  _chartData.tempLine.line.remove(); } }); // 對(duì)圖標(biāo)單擊鼠標(biāo)，保存線 _chartData.imageGs.on('click', function (d, i) { // 保存臨時(shí)線 drawLine(); // 停止實(shí)時(shí)畫線 exitDrawing(); }); }); // 點(diǎn)擊鼠標(biāo)右鍵,停止實(shí)時(shí)畫線 _bodyRect.on('contextmenu', function(){ // 停止實(shí)時(shí)畫線 exitDrawing(); d3.event.preventDefault(); }); }); }