score:1
I think your code could be modified as follow (untested, so unsure):
var data = [2, 4, 8]
var g = d3.select('svg').selectAll('.g').data(data);
// do stuff to the entering group
var enterSelection = g.enter();
var enterG = enterSelection.append('g')
.attr('class', 'g');
//Append circles only to new elements
enterG.append('circle')
.attr('class', 'circle')
.attr('r', function(d) { return d })
// for each of the enter and updated groups, adjust the radius of the child circles
enterG.merge(g)
.select('.circle')
.transition()
.attr('r',function(d){return d*2});
g.exit().remove()
When using the first .selectAll
, only existing elements are selected. Then, by entering, you are creating new elements, that generate a new selection. When you need to update all, you simply merge the new and existing elements in a single selection.
From that selection, I simply selected all .circle
(single select - one element per g
), and then update the radius thanks to the binding API that prevents me from making a .each
call. I am unsure as how these two compares, I simply always did it this way.
Finally, here is a bl.ocks demonstrating the pattern.
Source: stackoverflow.com
Related Query
- Difficulty understanding d3 version 4 selection life cycle with nested elements
- d3.on("mouseover") event does not work with nested SVG elements
- d3.js: Nested Selection with update using `join`
- Onion Ring Chart with nested elements
- Render text with nested data in D3 js version 5
- Adding a key to nested elements in a d3.js chart with the data() method
- d3.js: nested selection with two one dimensional arrays
- Nested selection with Update
- Understanding D3 enter, update and exit selections with nested content
- D3 v4: spacing between and binding of elements of arbitrarily complex array with nested g tags
- How to prevent duplicating nested elements on update with D3.js
- D3 nested selection with json: how to apply .force() to nested elements?
- Update a d3.js (v5) selection bound with double nested data
- Confused with selection of d3.js version 3
- d3.js nested selection with 2d array
- D3 Nested append with update, selection issues
- Appending nested svg elements with D3js data binding?
- How do I remove all children elements from a node and then apply them again with different color and size?
- correct way to tell if my selection caught any existing elements
- Appending multiple non-nested elements for each data member with D3.js
- D3: update data with multiple elements in a group
- Combining Parent and Nested Data with d3.js
- Recursively (or iteratively) make a nested html table with d3.js?
- getBBox of selection with D3 v4
- How to update the fill color on existing svg elements with d3.js?
- Simplest way of integrating Angular-created elements with D3
- Setting default selection of a dropdown menu with D3
- Creating and appending detached elements with d3.create
- D3 updating graph with new elements create edges with the wrong nodes
- Creating nested Json structure with multiple key values in Python from Json
More Query from same tag
- D3.js: Generating an X axis removes some of my point's labels, generating a Y axis removes them all
- How to append elements to a nested layer
- How to Draw rectangles at 0,45,90,135,180 degree so on around an SVG Circle with D3.js
- d3.csv working in jsfiddle not working on MTurk Worker Sandbox
- Can't trigger POST-JSON request with d3 typings
- Animating arc to horizontal line with d3.js
- D3: use d3.max to get containing object?
- D3js json based input for widgets - Json format
- Can't load image from SVG image element
- How to bind an angularjs directive to a d3js node defined in a link function
- Edit NVD3 lineChart grid
- How to use quantile color scale in bar graph with drill-down?
- D3.js violin plot not showing up
- Add new path to an existing map in D3
- d3.js barchart inline stroke
- Add colors to dimple.js bar chart based on value and add goal line
- Linking dygraphs.js to d3 charts
- how to get rangeBand() of aAxis in NVD3
- SVG with Horizontal Scrolling
- IE8 Support for D3 using Aight
- d3js V6, how to use more than one left axis?
- number converted to SVGAnimatedLenght
- d3.js packing bubble chart elements
- Display an SVG image at the middle of an SVG path
- d3 json loading error Uncaught TypeError: Cannot read property 'length' of undefined
- How to get JSON key for d3.js chart
- Running GDAL from the command line on Windows 10 x64
- D3.js change title text when mouseover a bar
- d3 change button style when setinterval animation finishes
- polygon weird redrawing by adding & dragging dynamic points (flickering)