更改dagre-d3中边缘的形状

时间:2019-07-08 14:05:10

标签: dagre-d3

我正在尝试使用dagre-d3构建有向无环图。是否可以以某种方式更改边缘的形状?因为它看起来很杂乱,没有解决方案。

这是我绘制图形的代码:

drawDrag(nodes: [], links: any[]) {
    const graph = new dagreD3.graphlib.Graph().setGraph({
        ranksep: 200,
        align: 'UL'
    });

    graph.setDefaultEdgeLabel(() => '');

    nodes.forEach((node: any) => {
        graph.setNode(node.id, node);
    });

    links.forEach((link: any) => {
        graph.setEdge(link.parentId, link.id, {
            label: ''
        });
    });

    graph.nodes().forEach(v => {
        const node: any = graph.node(v);

        node.width = this.nodeSideSize;
        node.height = this.nodeSideSize;
        node.rx = 5;
        node.ry = 5;
    });

    const svg = d3.select('svg');
    const inner: any = svg.select('g');
    const render = new dagreD3.render();

    render(inner, graph);

    const padding = 120;
    svg.attr('width', graph.graph().width + padding);
    svg.attr('height', graph.graph().height + padding);

    // Center the graph
    const offset = padding / 2;
    inner.attr('transform', 'translate(' + offset + ', ' + offset + ')');
}

这是现在的样子:

enter image description here

0 个答案:

没有答案