使用dagre-d3做一個dag圖（關係圖）

溯朝發表於2018-04-09

dagre-d3外掛github地址：github.com/dagrejs/dag…

簡易版github網址: github.com/xuhuihui/sv…

csdn引入:

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="../dist/dagre-d3.js"></script>複製程式碼

index.html

<svg id="svg-canvas" width=960 height=900></svg>複製程式碼

index.js

1.宣告陣列state（點）和edg（邊）

  var state = [
    { label: 'project_etl_start\n虛節點', class: 'type-suss' }, 
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },   
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },  
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },  
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },   
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },    
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },    
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },    
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },    
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },    
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },    
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },    
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },    
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' },    
    { label: 'project_etl_start\n虛節點', class: 'type-TOP' }
]  
var edg = [
    { start: 1, end: 4, option: {} },
    { start: 1, end: 3, option: {} },
    { start: 1, end: 2, option: {} },
    { start: 6, end: 7, option: {} },
    { start: 5, end: 6, option: {} },
    { start: 9, end: 10, option: {} },
    { start: 8, end: 9, option: {} },
    { start: 11, end: 12, option: {} }, 
    { start: 8, end: 11, option: {} },
    { start: 5, end: 8, option: {} },
    { start: 1, end: 5, option: {} },
    { start: 13, end: 14, option: {} },
    { start: 1, end: 13, option: {} },
    { start: 0, end: 1, option: {} }
  ]複製程式碼

2.建立物件graph。

  var g = new dagreD3.graphlib.Graph()
        .setGraph({})
        .setDefaultEdgeLabel(function () { return {}; });複製程式碼

3.宣告並新增樹節點和邊。

  for (let i in state) { //畫點
    let el = state[i]
    g.setNode(i, {
      id: i,
      label: el.label,
      class: el.class
    });
  }
  for (let i in edg) { // 畫連線
    let el = edg[i]
    g.setEdge(el.start, el.end, {
      style: "stroke: #0fb2cc; fill: none;",
      arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;",
      arrowhead: 'vee'
    });
  }複製程式碼

4.渲染dag圖。

    var render = new dagreD3.render();
    var svg = d3.select("#svgCanvas"); //宣告節點
    svg.select("g").remove(); //刪除以前的節點，清空畫面
    var svgGroup = svg.append("g");
    var inner = svg.select("g");
    var zoom = d3.zoom().on("zoom", function () { //新增滑鼠滾輪放大縮小事件
      inner.attr("transform", d3.event.transform);
    });
    svg.call(zoom);
    this.drawNode();//畫點
    this.drawEdg();// 畫連線
    render(d3.select("svg g"), this.g); //渲染節點
    let max = svg._groups[0][0].clientWidth>svg._groups[0][0].clientHeight?svg._groups[0][0].clientWidth:svg._groups[0][0].clientHeight;
    var initialScale = max/779; //initialScale元素放大倍數，隨著父元素寬高發生變化時改變初始渲染大小
    var tWidth = (svg._groups[0][0].clientWidth  - this.g.graph().width * initialScale) / 2; //水平居中
    var tHeight = (svg._groups[0][0].clientHeight  - this.g.graph().height * initialScale) / 2; //垂直居中
    svg.call(zoom.transform, d3.zoomIdentity.translate(tWidth, tHeight).scale(initialScale)); //元素水平垂直居中複製程式碼

5.新增滑鼠右鍵事件，樣式如圖：

使用dagre-d3做一個dag圖（關係圖）

  //主要程式碼如下：
  var svgCanvas = document.getElementById('svg-canvas'); //svg
  var myMenu = document.getElementById("myMenu"); //右鍵選單

  svgCanvas.addEventListener('mouseover', function (e) {//監聽滑鼠右鍵
    e.preventDefault();
    if (e.target.tagName === 'rect') {
          myMenu.style.top = event.clientY + "px"; //獲取滑鼠位置
          myMenu.style.left = event.clientX + "px";
          myMenu.style.display = 'block';      //顯示相應右鍵內容
    }
  })
  document.addEventListener("click", (event) => {
     myMenu.style.display = 'none';
  });
複製程式碼


相關文章