我正在尝试使用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 + ')');
}
这是现在的样子: