score:0
you can't do this in d3, but jquery has the .appendto()
function for that, e.g.
$("#element").appendto("#othergroup");
score:0
perhaps you could do this, with multiple elements:
d3.select('#btn').on('click', function() {
circle.remove()
.each(function(){
group2.node().appendchild(d3.select(this).node());
});
});
score:4
to just move around existing nodes within the dom tree it is not necessary to first remove them to later re-append those same nodes at a different position. d3.append()
internally uses node.appendchild()
which works as follows:
if the given child is a reference to an existing node in the document,
appendchild()
moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).this means that a node can't be in two points of the document simultaneously. so if the node already has a parent, the node is first removed, then appended at the new position.
as other answerers have already mentioned both selection.append()
and selection.insert()
when being passed a function will append or insert, respectively, the node returned by that function. knowing that, all it takes to move around a dom node from its current position to a new target is
target.append(() => existingnode); // target is a d3 selection, existingnode is a native dom node
having this in your toolbox it is also fairly easy to move around multiple nodes at once:
selectiontobemoved.each(function() { target.append(() => this); });
have a look at the following demo to see it in action. the two circles colored in aquamarine
are move from group #g1
to group #g2
.
const current = d3.select("#g1");
const target = d3.select("#g2");
current.selectall("circle[fill=aquamarine]")
.each(function() { target.append(() => this); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
<svg>
<g id="g1">
<circle cx="100" cy="100" r="20" fill="aquamarine" />
<circle cx="150" cy="100" r="20" fill="hotpink" />
<circle cx="200" cy="100" r="20" fill="aquamarine" />
</g>
<g id="g2">
</g>
</svg>
score:17
the docs you posted also mention that you can re-add the elements by passing a function to .append
or .insert
. here's what it says:
note that there is not currently a dedicated api to add removed elements back to the document; however, you can pass a function to selection.append or selection.insert to re-add elements.
since using .remove
on a selection returns that selection, you could store the removed element in a variable, and then .append
it to the new group using selection.node()
to grab the dom element from the removed selection:
var removed = yourselection.remove();
yourtargetgroup.append(function() {
return removed.node();
});
here's a simple fiddle that uses this technique to move a circle element from one group to another in a click handler.
Source: stackoverflow.com
Related Query
- Can I move an SVG element between SVG groups, in d3.js
- Can I append a literal SVG element with d3?
- How can I convert SVG coordinates (x,y) defined relatively to an element into absolute coordinates/position?
- How can I pass attributes of an SVG element to a new event in D3?
- Move an SVG element across Divs
- How can we add the space between bars for multiple groups of bars in c3js?
- How can I get the dom svg element from d3 node data?
- How can I apply a clipPath in SVG with multiple paths and NOT clip out the area between the paths?
- How can I animate the top of my svg element like in this gif using d3.js?
- How can I set the background color of a svg element which contains a D3 heat map?
- Can svg element trigger click event of svg elements under itself?
- how to set collision between nodes and other svg element in D3.js
- D3 How can i replace a SVG element
- SVG path element rendered inconsistently between different versions of Chrome
- How can I toggle the value of an svg text element with D3.js when user clicks the text?
- D3.js Mouse events between different SVG groups
- How can I remove or replace SVG content?
- Updating SVG Element Z-Index With D3
- How to access the DOM element that correlates to a D3 SVG object?
- How do I get the width of an svg element using d3js?
- Difference between svg and canvas in d3.js
- D3 Differentiate between click and drag for an element which has a drag behavior
- d3.js - How can I set the cursor to hand when mouseover these elements on SVG container?
- Finding Offset Position of SVG Element
- D3 Selecting an element inside an SVG
- Append SVG canvas to element other than body using D3
- D3 - Difference between basis and linear interpolation in SVG line
- Get width of d3.js SVG text element after it's created
- D3 - Positioning tooltip on SVG element not working
- SVG element loses event handlers if moved around the DOM
More Query from same tag
- D3 visualization from Hbase using REST api/json
- Error while calling d3-tip "tip.show" from inside a function
- how do i implement brush.move in d3 v3
- D3 area graph animation
- D3: Not able to parse dates with year-month
- Grouped line chart, how to draw lines in a repeating pattern
- Create Sankey/ Alluvial diagram in which the links combine at the node
- NVD3 Stacked Area chart looks weird
- 127.0.0.1 refused to connect
- d3 pie chart text label wrap
- Multichart(NVD3) x-axis labels not displaying
- Animating circles with D3.js
- d3.js mouse drag only working after selecting
- how to generate a network graph with edge weight using D3.js force layout
- How to cumulate d3.rollup data by year
- How can I apply a time scale and show my data in intervals of "n" years?
- How to replace X axis numerical values(years) with custom labels in D3.js for this example?
- c3 graph in a dark background; how to change axis and tick value color
- D3.js: Line chart - tooltip and vertical line of hover
- d3.js - how to animate a group attributes
- How do I modify the D3.js script to show my json's (contains SAP CDS Views) data correctly?
- nvd3 python and axis
- get percentage when using graphviz and d3 to generate pie DAG
- How to import a d3 v4 / v5 module into a Node project but keep the D3 v3 namespace style (d3.)?
- Is D3js v5 backwards compatible with v4?
- Passing in new Date to d3 popups
- Create a JSON file from a Flask view to be used with D3
- How to correctly centre text element on all bars of a nvd3 bar chart
- Exiting unused nodes in d3 force directed graph
- unable to create an automatic filling array without writing it manually