score:11
I'm not entirely certain what you're trying to do with the code you've posted, but I thought that duplicating an entire SVG node was interesting. It turns out it's quite easy to do with selection#html
- this doesn't work on the SVG node, but it does work on its container, so it's easy to clone the whole node:
function addAnother() {
var content = d3.select(this.parentNode).html();
var div = d3.select('body').append('div')
.html(content);
div.selectAll('svg').on('click', addAnother);
}
svg.on('click', addAnother);
See working fiddle here. Note that this only works if the SVG node is the only child of its parent - otherwise, you might need to wrap it somehow.
score:2
D3 doesn't provide cloning functionality, probably because of the native cloneNode method that already exists on DOM elements, including SVG nodes.
This method includes a boolean parameter to deep copy (i.e. copy all descendants) instead of just cloning the node it is called on. You would probably want to do something like bigRectContainer.node().cloneNode(true)
to copy the entire DOM branch of rectangles.
Source: stackoverflow.com
Related Query
- duplicating the whole svg element using d3.js
- How do I get the width of an svg element using d3js?
- Using d3.behavior.drag, How to keep a drag image visible outside of the svg element
- Darken the color of svg element each time on button click using D3 V3 or JavaScript
- How can I animate the top of my svg element like in this gif using d3.js?
- Get the closest element to a SVG node using Jquery closest() function
- Why are the .selectAll() D3-created circles in my SVG said to be 1 element using .length?
- How do I change the position of a circle svg element using the transform attribute?
- svg element not appearing in the body using d3.js
- How to access the DOM element that correlates to a D3 SVG object?
- Append SVG canvas to element other than body using D3
- Using ViewBox to resize svg depending on the window size
- SVG element loses event handlers if moved around the DOM
- mouseout/mouseleave gets fired when mouse moves INSIDE the svg path element
- Draw an svg arc using d3 knowing 3 points on the arc
- How to get reference to SVG (child) elements nested in another SVG element (parent) using D3?
- Renderer2 does not render SVG element while using d3 js - Angular 4
- How do I create a minimap of an SVG using D3 v5 and show the current viewport dimensions?
- How to get value from the element using selection in d3
- Rotate element thrown outside the SVG
- Using Angular ng-class with d3.js on svg element
- What is the fastest way to get SVG element given a position (x,y)?
- Set the percentage of animation in a transition of an element (forward, backward) using a slider
- D3.js: Dragging everything in group ('g') by element contained in the group using origin() function
- Why do the SVG properties of an SVG element sometimes show up as accessible and sometimes not?
- Why d3.domain() has only one element when I use the whole data array as domain?
- Access the text within SVG object using d3js
- Target SVG path to the middle of rect element
- Match SVG text element id with data id using D3
- Is it possible to insert an SVG image into an existing SVG element already rendered on the page?
More Query from same tag
- Gridster grid with dc.js and d3-tip Not working
- D3 v3 zoom/drag performance better with right mouse rather than left?
- Staggered? Chained? Single DOM element addressed by a series of d3 transitions of varying delay() and duration()
- Placeholders for anonymous functions in JavaScript
- Get location along a path or line upon click in d3
- d3.js Trying to create a grid and don't know how to access certain elements or bind to columns
- D3 directed graph nodes as rectangle
- D3: Adding class to tick on y-axis depending on the x-axis value
- AngularJS + d3js: Issues with resizing objects
- D3js arc animation not working when wrapping in object
- Is there any API to implement flow visualization like google flow visualization
- D3.js mouseover event not working in bar charts
- D3 selection returns empty list; elements exist in DOM
- How to re-execute D3 animation on a button click
- dc.js and crossfilter stack bar chart with filtered versus unfiltered
- How to get the index of the data element in a histogram on mouseover?
- Creating array from csv with d3.group without group headers
- How do I import the D3 library into my project file structure?
- Domain of a legend in D3.js
- D3 Bollinger Band Issue
- Dynamic url as data-attribute of pseudo-element in css and D3JS
- chart is not generated
- nvd3 multiBarChart with line along x axis
- angularjs and D3 - returning array for Donutchart
- D3js Stacked Barchart width is not propper
- Put D3 code into a function and call
- Multi dynamics d3 charts on a same page
- Placing d3.js svg elements inline in HTML
- D3 force layout, creating the links array on the fly
- D3.js idles between each mousewheel event