Question

我想创建一个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>
    );
};

DependencyGraph：

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);
...

但是我只是不知道如何使用当前设置进行操作。请帮助？我要问的甚至可能吗？

使用react组件渲染图

0 个答案: