Я создаю граф с вложенными узлами, используя библиотеки 'D3' и 'dagre'.
Я хочу подключить узел «Уровень 1» к «Среднему уровню», а затем «Средний уровень» к «Уровню 3».
Но когда я использую g.setEdge, я получаю следующую ошибку:
Невозможно установить свойство 'rank' из неопределенного
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script id="js">
var g = new dagreD3.graphlib.Graph({ compound: true }).setGraph({}).setDefaultEdgeLabel(function () { return {}; });
g.setNode('a', { label: 'Level 1' });
g.setNode('b', { label: 'B' });
g.setNode('g', { label: 'Level 3' });
g.setNode('group', { label: 'Middle Level', clusterLabelPos: 'top', style: 'fill: #d3d7e8' });
g.setNode('top_group', { clusterLabelPos: 'bottom', style: 'fill: #ffd47f' });
g.setParent('top_group', 'group');
g.setParent('b', 'top_group');
g.setEdge('group', 'b');
g.setEdge('b', 'g');
var render = new dagreD3.render();
var svg = d3.select("svg"),
svgGroup = svg.append("g");
render(d3.select("svg g"), g);
var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
svg.attr("height", g.graph().height + 40);
</script>