score:10
there has been a conceptual change of the enter and update selections from v3 to v4. whereas in v3 the enter selection was automatically merged into the update selection you have to explicitely call selection.merge()
from v4 upwards to get the same result.
the documentation for selection.enter()
of v3 tells us:
the enter selection merges into the update selection when you append or insert.
the documentation of the same method of v4, on the other hand, reads:
the enter selection is typically only used transiently to append elements, and is often merged with the update selection after appending, such that modifications can be applied to both entering and updating elements.
have a look at this simplified example using v3, which should come with no surprises:
var update = d3.select("svg").selectall("circle")
.data([1]);
var enter = update.enter()
.append("circle")
.attr("cx", "50")
.attr("cy", "50")
.attr("r", "20")
.attr("fill", "red");
update
.transition().duration(2000)
.attr("fill", "blue");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg></svg>
doing the same with v4 requires a little modification, though:
var update = d3.select("svg").selectall("circle")
.data([1]);
var enter = update.enter()
.append("circle")
.attr("cx", "50")
.attr("cy", "50")
.attr("r", "20")
.attr("fill", "red");
update
.merge(enter) // this merges both the enter and the update selection
.transition().duration(2000)
.attr("fill", "blue");
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
commenting out the .merge()
line shows the effect you described, because the update selection will be empty, even though you entered new elements using the enter selection before.
Source: stackoverflow.com
Related Query
- D3.js v4.0.0-alpha.35 Transitions not working
- D3 transitions not working
- D3.js Pie Chart Dynamic Update Transitions not Working as Expected
- d3.js Bar Chart transitions not working properly
- D3 .remove() method not working when chained with transitions
- d3 transitions not working in multiple browsers
- font size is not working in my d3.js code
- d3.select("#element") not working when code above the html element
- Title Attribute not working for an SVG Rect on Safari
- d3.js - mouseover event not working properly on svg group
- D3 - Positioning tooltip on SVG element not working
- d3.select method not working
- D3 Bar Graph example not working locally
- d3.js transition() not working when browser is minimised
- d3 transition for transform translate not working for DIV
- $location not working in AngularJS using d3.js
- Exit not working properly
- Simplest D3.js example not working
- Angular 4 + D3v4 : dragging circle not working correctly in conjunction with zooming
- D3 function to parse the date not working
- d3 zoom not working as in example
- d3.select is not working with special Characters
- D3 transition not working
- D3 Zoom functionality is not working in Google chrome
- d3-tip offset on svgs within Leaflet, Firefox only, not working
- d3.select.style not working on firefox
- D3: .transition() not working with events
- d3 raise() not working on specific selection
- D3: Zooming/Panning Line Graph in SVG is not working in Canvas
- d3.js Tooltip positioning not working
More Query from same tag
- D3jS show info on hover over circle
- Chord DHT Graph with D3JS
- Cannot visualize percentage numbers (getting NaN)
- Logarithmic charts in crossfilter
- D3js : data update is not updating right objects
- how to search a node and highlight it
- set only 1 level depth by default instead of showing all in d3-hierarchy
- d3 changes time zone while parsing
- When a d3.behavior.zoom event is triggered programatically, how do you set inital values for translate and scale?
- Connecting elements in different SVGs
- How to create a tooltip for multiple points in a scatterplot with d3
- D3.Js- passing data set from C# to javascript does not work
- d3 Adding cells to an existing table
- how to deal with OnChanges that requires an AfterViewInit
- Constrain zoom and pan in d3
- D3 Table Example with Array of Arrays Yields Empty TD Tags
- show div and hide other ones - d3.js
- how to draw an array of circles in a straight line, in the bottom of the browser window
- d3.js: Does force layout only work with circles?
- D3.js stacked bar chart growing to negative direction
- D3.js nodes set bgcolor from array but never adjacent
- Parameter no of type node error with nested data in d3
- Select all instance of a word in a rendered webpage
- D3 Scatterplot: Tooltip appears on initial load, but disappears after filter updated using dropdown
- dc.js composite chart errors
- How to omit a column from stack?
- Add region around SVG path for mouseover
- Arc Based Text Alignment in D3
- D3 un-nested selection
- Visualize data count in d3