score:1
Accepted answer
the problem is that you are drawing the new graph over the old graph.
that is the reason why you get the impression that its adding child to the old parent.
so the correct approach would be to
- draw the graph
- remove all nodes that is not required.
so 1st point
var nodedata = svg.selectall(".node")
.data(nodes, function(d){ /* function which return the unique id of each node */ return d.name;})
//make all the nodes.
nodedata.enter().append('g')
.attr("class", "node")
.append('rect')
.attr("width", 50)
.attr("height", 40)
.attr("fill", "tan")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y + 50; })
.on("click", function(d,i){
clickoutside(d);
});
2nd point
remove all nodes which are intersection of first set of passed data and the second set of passed data.
nodedata.exit().remove();
last point add children to parent
you can change the json
var dataone = {
"name": "mike and marcia",
"children": [
{
"name": "children",
"children": [
{ "name": "mikael" }
]
}
]
};
add whatever structure json and pass it down your drawtree function
working code here
Source: stackoverflow.com
Related Query
- Adding Dynamic Node in D3 Tree
- Adding class to root node in d3js tree layout
- Adding a new node to d3 tree
- Add Node to D3 Tree v4
- Add hyperlink to node text on a collapsible tree
- D3.js Adding links between elements in a radial tree (Hierarchical edge bundling elements)
- how to display name of node when mouse over on node in collapsible tree graph
- D3js V4 Center Node in Zoomable Tree
- How can I connect two parent node into one child node and how to make a tooltip for each node in the tree pragmatically? in D3 js (SVG)
- How to remove node on tree layout D3.js?
- javascript zoomable tree map click the last node
- D3 Tree node double click highlights text
- polygon weird redrawing by adding & dragging dynamic points (flickering)
- Replicate d3.js Dynamic tree in Raphael
- D3 collapsible Tree different node colors
- d3js force layout dynamically adding image or circle for each node
- D3.js: Expand tree till node n
- Hiding Root node in d3 tree
- Hide root node and edges in D3 v4 Tree Diagram
- d3.js on-demand data loading to get the next node for a tree
- Select all the paths and parent nodes of a child node in tree layout
- Removing node and its children from d3js tree layout
- Best solution to label nodes in SVG dynamic tree (using D3.js)
- Specifying nodeSize for each node individually in D3.js tree layout
- Add iFrame to each node on a D3 collapsible tree plugin
- d3 Tree - How to auto adjust node spacing when zooming
- Radial Reingold Tilford Tree remove root node
- Adding marker on d3 tree layout links
- d3 update tree layout with dynamic data
- D3 Tree node on click
More Query from same tag
- D3 Force Graph find most nodes connection
- Data mutation in Angular directive for d3 tree-based chart
- Get a node by its ID
- How to show circles (created using JSON data) in reverse order using a delay function?
- How to save automatically a HTML SVG element generated dynamically
- d3js timeseries - svg path has huge values
- Return multiple values from a crossfilter dimension for a pie chart
- d3.js rotate 27deg radar
- What's the point of using an anonymous function for a one-liner?
- Transition on path in d3.js is not working
- updating d3 data using intervals
- combining class="{{...}}" expression w/ ng-class="{'className' : boolean}" expression?
- Victory Chart x-axis scale not working for Dates
- Uncaught TypeError: Cannot read property 'axis' of undefined
- Multiline chart x-axis ticks not aligned with data points
- Transition between a circle and a line with svg and d3
- Formatting a callback function in d3.js to place symbols on a multiseries linechart
- Outliers in Axes in D3 (Mixing numerical and categorical specifications)
- D3.js redraw graph on button click
- "TypeError: curve is not a function. (In 'curve(buffer = path())', 'curve' is undefined)" in d3.js.v4
- Using D3 to access nested JSON data
- d3pie error: no data supplied on d3pie.js
- How do I write a forEach statement as a Promise.all
- D3 curved labels in the center of arc
- simple cubism.js with json datasource
- D3 v4 add another node to array
- Angular.js custom directive and d3.js
- How to round top and bottom corner of stacked bar chart?
- How to find if point is inside polygon in d3.js
- Text element causing Rect element to recall mouseover event