It appears that the problem that you are having is due to the fact that your data might be duplicating within D3's data-join functionality. It is likely that the best way to solve the issue is to create a "UUID / GUID" for each node in your data before D3 binds it (see here for an example). Once you have done that, then you can bind the data and use the data-join's key-specify function (see here for an explanation) to tell D3 to use the UUID / GUID values you created for each object to guarantee consistency. From there, you should be able to handle the parent-child relationships easier.
Since that worked for the duplicate values, the next problem that you are likely having is because the reference to the "source" object is not set up the way that D3 would expect. In D3, the link's "source" property is a reference to the actual source object, where you are just providing the ID value (see here for the D3v4 docs reference). Try providing the reference to the actual source object within the array and that should fix it.
You are correct in that you are handling NEW data coming into the visualization, but I don't think that you're handling EXISTING or OLD (meaning, data points that are no longer relevant and the nodes / links need to be removed). In this case, try updating your code with the following example from Mike Bostock (the original creator of the D3.js library) here and then report back once that is done. It is possible that the new nodes that you are seeing are simply the older nodes that need to be removed since they no longer have the children tied to them, so D3js sees them as "new" or "existing" nodes that actually need to be removed.
- D3 updating graph with new elements create edges with the wrong nodes
- Updating nodes and links with labels in d3 force directed network graph is not removing the nodes properly
- nodes without edges escaping the graph in D3 v4
- D3 Force Graph With Arrows and Curved Edges - shorten links so arrow doesnt overlap nodes
- How to connect edges with nodes based on nodes id in d3.js graph library
- d3.js not updating graph with new data
- A very simple d3 data join adds the new elements in the wrong place
- d3 bar chart labels not getting updated on updating the chart with the new data
- updating d3 chart with new data, the old data points not removed
- d3js with angular directive - each click appending new graphics instead of re-draw or updating the data
- D3.js Force Directed Graph with Json - Create graph specifying link distance from all nodes
- Updating graph with new data
- Drawing multiple edges between two nodes with d3
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
- Labels / text on the nodes of a D3 force directed graph
- How to update the fill color on existing svg elements with d3.js?
- How can I start with all the nodes collapsed in d3js?
- d3js create a force layout with fixed nodes
- Adding a horizontal line to d3 graph displays at the wrong value
- How to create a reusable component in D3 with an API that manipulates each instance of the component?
- enclosing the nodes of a d3 force directed graph in a circle or a polygon or a cloud
- Adding child elements to specific nodes in a force-directed graph using d3js
- Join existing elements of the DOM to data with d3.js
- When running a D3 update/enter/exit, how to ignore already exiting elements during the new exit?
- Looping through data attributes to create 4 separate bar charts... why are there "phantom" data elements being bound to the xAxis?
- D3 force layout graph with nodes positioned in a grid
- How to check d3 js force graph for nodes with no links and remove them?
- D3 new data at .data() makes svg to redraw instead of updating nodes position
- New layout after opening a group not base on the last layout with cola.js
More Query from same tag
- need to set back ground color for c3 sub chart or make it less transparent than main chart
- Appending class to existing .div's using a function
- Flask - Write temp CSV to be read by D3
- CSS3 3D flip card effect with SVG elements
- nvd3 / svg not getting updated with new data
- dc.js, fill table with data from object dynamically
- Get all ticks values (NVD3)
- d3.selectAll to change styles by class in v4
- NVD3 LinePlusBarChart .enableFocus onClick no working
- Simple d3.js graph with a json feed input
- d3 error with manual zoom
- Easy way to slide down an SVG element?
- Add labels or text to tooltip
- d3 selectAll.remove() is lagging versus d3.select.remove()
- Updating grouped bar charts does not clear existing charts
- Add horizontal crosshair to d3.js chart
- jquery error when trying to get window width
- R Specify colors in sankeyNetwork
- d3.js - Tree Layout - How can I flip it?
- How to give a class for all descendants of a tree node
- How to dynamically append text to svg using d3 and Ajax?
- D3.js - Appending to <div> not working
- html in d3.js text tag
- d3js Force Layout Not Working As Expected
- D3.js - Highlight chart elements when interacting with the legend & vice versa
- how to use svg file for image source in D3
- D3 output not rendering in Safari, Firefox, Edge and IE. Works in Chrome
- d3-fetch and UTF-16 LE
- What is difference and similarities between Angular.js/D3.js/Node.js