本來要直接用D3的tree來實(shí)現(xiàn)樹結(jié)構(gòu)的，后來添加了新需求，2個父節(jié)點(diǎn)指向同一個子節(jié)點(diǎn)胞谭，然后就換成了dagre-d3來設(shè)置轿偎，這里來記錄一下

版本使用：d3用的4.13.0，dagre-d3用的0.6.3

效果圖如下:

最終效果圖

var nodes = [
        { id: 0, label: '根節(jié)點(diǎn)', },
        { id: 1, label: '一級節(jié)點(diǎn)1',  },
        { id: 2, label: '一級節(jié)點(diǎn)2',  },
        { id: 3, label: '一級節(jié)點(diǎn)3', },
        { id: 4, label: '一級節(jié)點(diǎn)4', },
        { id: 5, label: '二級節(jié)點(diǎn)1', },
        { id: 6, label: '二級節(jié)點(diǎn)2', },
        { id: 7, label: '三級節(jié)點(diǎn)1', },
        { id: 8, label: '三級節(jié)點(diǎn)2', },
    ];
    var line = [
        { start: 0, end: 1, },
        { start: 0, end: 2, },
        { start: 0, end: 3, },
        { start: 0, end: 4, },
        { start: 1, end: 5, },
        { start: 1, end: 6, },
        { start: 6, end: 7, },
        { start: 1, end: 7, },
        { start: 2, end: 8, },
    ];

關(guān)鍵代碼（在網(wǎng)上找的璧榄，不知道出處是哪里了）：

var diagGraph = { //diag圖數(shù)據(jù)操作
    state: [],
    edg: [],
    statePoint: '',
    g: '',
    init: function (statePoint ,state, edg) {
        this.statePoint = statePoint
        this.state = state
        this.edg = edg
        this.createG();
        this.renderG();
    },
    createG: function () {
        this.g = new dagreD3.graphlib.Graph()
        .setGraph({
            rankdir: 'LR' //方向
        })
        .setDefaultEdgeLabel(function () { return {}; });
    },
    drawNode: function () {
        for (let i in this.state) { //畫點(diǎn)
            let el = this.state[i]
            let style = '';
            this.g.setNode(el.id, {
                id: el.id,
                label: el.label,
                class: el.class,
                style: el.node_id,
                node_id: el.node_id,
            });
        }
        this.g.nodes().forEach((v) => { //畫圓角
            var node = this.g.node(v); 
            node.rx = node.ry = 10;
        });
    },
    addNode:function(nodelist){ },
    drawEdg: function () {
        for (let i in this.edg) { // 畫連線
            let el = this.edg[i]
            if (el.start === this.statePoint || el.end === this.statePoint) {
                this.g.setEdge(el.start, el.end, {
                    style: "stroke: #0fb2cc; fill: none;",
                    arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;",
                    arrowhead: 'vee'
                });
            } else {
                this.g.setEdge(el.start, el.end, {
                    arrowhead: 'vee'
                });
            }
        }
    },
    renderG: function () {
        var render = new dagreD3.render();
        var svg = d3.select("#svgCanvas");
        svg.select("g").remove(); //刪除以前的節(jié)點(diǎn)
        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); //渲染節(jié)點(diǎn)
        var 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;
        var initialScale =1;
        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;
        var trans = d3.zoomIdentity.translate(tWidth, 50).scale(initialScale); //.scale(initialScale) 
        svg.call(zoom.transform,trans); //元素居中
    },
    changePoint: function (point) {
        this.statePoint = point * 1.0
        this.renderG()
    },
}

    var statePoint = 0; // 當(dāng)前選中的點(diǎn) 
    diagGraph.init(statePoint, nodes, line); //創(chuàng)建關(guān)系圖

實(shí)現(xiàn)右鍵效果

contextmenuclick(e){ //右鍵
     if (e.target.tagName === 'rect' || e.target.tagName === 'text') {  
          var value=e.target.__data__;  
          //實(shí)現(xiàn)邏輯
     } else {
          this.menuflag=false;
     } 
}