D3js

This article or section is a stub. Stubs are articles that have not yet received substantial attention from the authors. They are short or insufficient pieces of information and require additions to further increase the article's usefulness. The project values stubs as useful first steps toward complete articles. See Wiki workflow and Wikipedia:Stub for more details on this process. See all the stubs in Category:Stubs

https://d3js.org/

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();
	}
});