2

我想创建一个 DAG，让 react 负责渲染（使用钩子进行状态管理），而 d3 只进行计算。使用 dagre 计算 x、y 和点坐标可以正常工作。现在我想在边缘添加箭头，为此我首先需要使用 dagre-d3 render() 函数。

但是我无法弄清楚如何使渲染功能与我当前的设置一起工作（或者如果它甚至可能的话）。

我有两个组件；GraphWrapper 和 DependencyGraph。GraphWrapper 检索并保存数据，并呈现 svg 元素。DependencyGraph 是一个返回分组元素的功能组件。

GraphWrapper 看起来像这样

    ...
    // how can i use this function with my current setup?
    const render = new dagreD3.render();

    return (
            <svg width={1200} height={750}>
                <DependencyGraph
                    nodeDataset={nodeDataset}
                    edgeDataset={edgeDataset}/>
            </svg>
    );
};

依赖图：

export const DependencyGraph: React.FC<IDependencyGraph> = ({nodeDataset, edgeDataset}) => {

    const g = new dagreD3.graphlib.Graph({compound:true})
        .setGraph({rankdir: 'LR'})
        .setDefaultEdgeLabel(() => ({}) );

    nodeDataset.forEach(({id, info}) => g.setNode(id, info));
    edgeDataset.forEach(({from, to}) => g.setEdge(from, to));

    dagre.layout(g);

    return <>
        <g stroke={'#fff'} strokeWidth={1.5}>
            {g.nodes().map((v: any) => {

                const {label, width, height, x, y} = g.node(v);

                return <rect key={label} width={width} height={height} x={x - 50} y={y - 24} fill={'none'} stroke={'black'} />
            })}
        </g>

        //some more grouping elements
        ...
    </>;
}

据我了解，我需要通过 dagre-d3 渲染函数传递图形以添加边缘箭头和更多类似的东西。在 dagre-d3 文档中它说：

...
// Create the renderer
var render = new dagreD3.render();

// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
    inner = svg.append("g");

// Run the renderer. This is what draws the final graph.
render(inner, g);
...

但我只是不知道如何使用我当前的设置来做到这一点。请帮忙？我要问的甚至可能吗？

4

0 回答 0