D3js
From Organic Design wiki
Problems
Z-Index
Since D3 works with svgs, you cannot change the z-index of particular elements, elements are always drawn in the order they are created. What you can do however is sort these svg elements so that whatever one you would like to be on top gets drawn last.
node.on("EVENT", d => {
svg.selectAll("SELECTOR").sort(a => a.id !== d.id ? -1 : 1);
});
Chart Redraw in Vue
If you try to bind dynamic data to a chart in d3 you may find that the chart redraws all the elements every time, this is because Vue changes all the data every update and what is required is to mutate the data. What you will need to do is store your dynamic data into a variable and mutate that variable to look like the dynamic data every time it changes. You can also define an update function in the parent node so you can easily change your data elsewhere.
return Object.assign(svg.node(), {
update: () => {
simulation
.nodes(this.dataNodes)
.force("link").links(this.dataLinks);
node = this.addNode(nodeContainer, simulation);
link = this.addLink(linkContainer);
simulation.alpha(1).restart();
}
});