Grouped links and node in different containers to avoid overlap
diff --git a/views/ngXosViews/mcordTopology/src/css/mcord.css b/views/ngXosViews/mcordTopology/src/css/mcord.css
index 80b7d92..68cca28 100644
--- a/views/ngXosViews/mcordTopology/src/css/mcord.css
+++ b/views/ngXosViews/mcordTopology/src/css/mcord.css
@@ -27,7 +27,7 @@
}
.fabric-container {
- fill: #fff;
+ fill: transparent;
stroke: #000;
stroke-width: 1;
}
diff --git a/views/ngXosViews/mcordTopology/src/js/main.js b/views/ngXosViews/mcordTopology/src/js/main.js
index 613f758..bf57f1d 100644
--- a/views/ngXosViews/mcordTopology/src/js/main.js
+++ b/views/ngXosViews/mcordTopology/src/js/main.js
@@ -69,7 +69,15 @@
.style('width', `${el.clientWidth}px`)
.style('height', `${el.clientHeight}px`);
+ const linkContainer = svg.append('g')
+ .attr({
+ class: 'link-container'
+ });
+ const nodeContainer = svg.append('g')
+ .attr({
+ class: 'node-container'
+ });
// replace human readable ids with d3 ids
// NOTE now ids are not manatined on update...
@@ -196,7 +204,6 @@
nodes = positionFabricNodes(nodes);
- NodeDrawer.drawFabricBox(svg, hStep, vStep);
// start force layout
force
@@ -209,8 +216,14 @@
.linkStrength(0.1)
.start();
+
+ const linkContainer = d3.select('.link-container');
+ const nodeContainer = d3.select('.node-container');
+
+ NodeDrawer.drawFabricBox(nodeContainer, hStep, vStep);
+
// draw links
- var link = svg.selectAll('.link')
+ var link = linkContainer.selectAll('.link')
.data(links, d => d.id);
link.enter().append('line')
@@ -231,7 +244,7 @@
.remove();
//draw nodes
- var node = svg.selectAll('.node')
+ var node = nodeContainer.selectAll('.node')
.data(nodes, d => {
return d.id
});