визуализировать график с использованием реактивных компонентов - PullRequest
Новая
       32

визуализировать график с использованием реактивных компонентов

0 голосов
/ 01 ноября 2019

Я хотел бы создать DAG, позволяющую реагировать на рендеринг (используя хуки для управления состоянием), а d3 - только для расчетов. Использование dagre для вычисления координат x, y и точки работает нормально. Теперь я хочу добавить стрелки к краям, и для этого мне сначала нужно использовать функцию render () dagre-d3.

Но я не могу понять, как заставить функцию рендеринга работать с моими текущими настройками (или если это вообще возможно).

У меня есть два компонента;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);
...

Но я просто не знаю, как это сделать с моими текущими настройками. Помогите, пожалуйста? Что я спрашиваю, даже возможно?

...