Question

请帮助我如何在精美的图形模式下使用D3显示此图形？

我已经使用Dagre渲染了这张图，但是有两个问题：

它不像其他D3图形那么漂亮

无法在节点与父节点之间建立边缘，反之亦然。

$(window).load(function () {
    'use strict';
    var width = 1200,
        height = 400,
        center = [width / 3, height / 3];
    var svg = d3.select('svg'),
        inner = svg.select('g');
    var zoom = d3.behavior.zoom()
        .translate([0, 0])
        .scale(1)
        .size([900, 400])
        .scaleExtent([1, 8])
        .on('zoom', zoomed);
    svg
        .call(zoom)
        .call(zoom.event);

    var g = new dagreD3.graphlib.Graph({ compound: true }).setGraph({});

    g.setNode('a_1', { labelType: 'html', label: 'A1' });

    g.setNode('b_nested_1', { labelType: 'html', label: 'Nested 1' });
    g.setNode('b_nested_2', { labelType: 'html', label: 'Nested 2' });
    g.setNode('b_nested_3', { labelType: 'html', label: 'Nested 3' });
    g.setNode('b_nested_4', { labelType: 'html', label: 'Nested 4' });

    g.setNode('c_1', { labelType: 'html', label: 'C1' });
    g.setNode('c_2', { labelType: 'html', label: 'C2' });
    g.setNode('c_3', { labelType: 'html', label: 'C3' });

    g.setNode('d_1', { labelType: 'html', label: 'D1' });
    g.setNode('d_2', { labelType: 'html', label: 'D2' });
    g.setNode('d_3', { labelType: 'html', label: 'D3' });

    g.setEdge('b_nested_1', 'c_1');
    g.setEdge('b_nested_1', 'c_2');
    g.setEdge('b_nested_1', 'c_3');
    g.setEdge('b_nested_2', 'c_2');
    g.setEdge('b_nested_3', 'c_1');
    g.setEdge('b_nested_3', 'c_4');
    g.setEdge('b_nested_4', 'c_3');

    g.setEdge('c_2', 'd_1');
    g.setEdge('d_2', 'd_2');

    g.graph().rankDir = 'LR';
    var render = new dagreD3.render();
    render(inner, g);
    var initialScale = 1;
    var _height = svg.attr('height') - g.graph().height;
    var _width = svg.attr('width') - g.graph().width;
    zoom.translate([(svg.attr('width') - g.graph().width * initialScale) / 2, 10]).scale(4).event(svg);
    svg.transition().duration(1200).call(zoom.translate([0, 0]).scale(1).event);
});

如何使用D3在图形中显示嵌套节点并在父节点和子节点之间建立链接？

0 个答案: