score:1
Firstly, below is not entirely correct. enter will just give you nodes for which there is no existing DOM element. You would use merge (in v4) to update the already existing nodes.
When I want to create new circles and therefore update the data set of my circles I do this:
svg.selectAll("circle").data(newDataSet,function(d){return d;}).enter().append("circle")
Coming to your actual question, below would assign click listener for each of the circle dom node.
svg.selectAll("circle").data(dataArray).enter().append("circle").on("click"),function(d){// do stuff});
So, new nodes added would have to assigned new event listeners.
I think you might be missing understanding of data joins, this is an excellent read. Using data joins would look something like this:
function makeCircles(data) {
var circles = d3.select('svg')
.selectAll('circle')
.data(data, function(d) {
return d;
});
circles.exit().remove();
circles.enter()
.append('circle')
.merge(circles)
.attr('r', function(d) {
return d + 5;
})
.attr('cx', function(d, i) {
return 50 + 50 * i;
})
.attr('cy', function(d, i) {
return 30;
})
.on('click', function() {
//
})
}
var data = [1, 2, 3];
makeCircles(data);
data = [10, 15, 16];
makeCircles(data);
If your concern is about assigning multiple event listeners, why not assign event listener to parent element of circles and let the events bubble?
Source: stackoverflow.com
Related Query
- New/updated element inherits event handlers from old one, D3
- How to pass an event from one element to another in d3?
- Get one element from d3js selection, by index
- SVG element loses event handlers if moved around the DOM
- Giving an element more than one event handler by selecting it using different selectors
- How can I pass attributes of an SVG element to a new event in D3?
- D3 - Prevent parent <g> element from firing click event
- d3.js touch and hold to create a line from one element to another
- D3 remove click events from one element out of a selection
- Remove line from chart and draw new one
- How to create a new array using the data from the old one?
- How can I remove drag event on one element in a draggable group?
- D3.js : Draw a new topojson and removing the old one
- Reload data from a drop down box created by script without having to delete the element and create another one
- How to link from path elements in one svg to a different element of another svg
- d3 - Create new element from the dataset for each node in the selection
- d3.js dendrogram : binding old and new properties to the svg element
- Changing one element of an array of arrays with event
- Accessing d3.js element attributes from the datum?
- D3 get attributes from element
- How do you make an SVG element mouse event bubble up through another element?
- how can I exclude an element from an Angular scope?
- D3.js v4: Access current DOM element in ES6 arrow function event listener
- programmatically trigger click event in svg rect element
- D3 V4: Updated data is being seen as new data? (Update function)
- Transition from one forced-directed graph to another graph in d3js
- draw a line from one circle to another in d3.js
- assign new id attribute to each element created
- Initialize element and start dragging with just one click
- In d3.js, how can I check if an element has been removed without doing a new selection?
More Query from same tag
- How to transform code from a tsv import to direct data
- on hover increase node radius
- How to sort a D3 bar chart (based on an array of objects) by value or key?
- D3Js Bar Chart Bars Starting Way After beginning of X-Axis
- D3 - Stop Force Graph from moving around, nodes should only stay where moved
- d3.js: vertical alignment of text in a donut chart
- How can I get access to the current selection inside a D3 callback?
- How can I properly aggregate / group multiple line graphs into one overall graph with d3.js when the x-values aren't matching exactly?
- How to add padding to a brush being use as a slider in d3?
- Fading certain images in force layout using d3.js
- How to show decimal numbers in d3 radialProgress?
- D3 smooth country floating
- How to connect the elements with each other by a line Angular
- Trying to remove a tick label in dimple.js
- D3: clustered force layout with fixed centers
- Uncaught ReferenceError: d3Scale is not defined / D3 V4 / rollup.js
- Looping transition in D3 version 4 and 5
- How to compute projection rotate and graticule extend for d3.js satellite projection
- Default computed properties with Ember 2.0
- Reset link strength D3 force
- How to check for NaN values in d3?
- TypeScript type cast & D3.js errors
- Datamap - Change color depending on value
- How to fix expandable tree in d3.js?
- D3.request - get JSON from PHP
- AngularJs ng-controller overrides
- How to restrict zoom to prevent zooming over axes?
- D3plus options having no effect on chart
- Layered graphs in d3.js
- referencing or hosting javascript on HTTP/2