score:1
Accepted answer
Here's how I'd do it:
1 Append all g elements outside the update function and give them a class name so you can reference them, for example:
svg.append("g")
.attr("class","axis axis--y")
2 Select an empty class and append the line and circles new data through enter()
, Example:
var line = svg.selectAll(".lineTest")
.data([data],function(d){ return d.ser1 });
line = line
.enter()
.append("path")
.attr("class","lineTest")
.merge(line);
line.transition()
.duration(durations)
.attr("d", valueline)
3 Toggle the dataset:
data = d3.select('#selection')
.property('value') == "First" ? data_set : data_set2
Here's a modified version of your code: Plunker
Source: stackoverflow.com
Related Query
- D3 V4 Transition on entering elements using General Update Pattern with merge
- First d3 transition on update inside interval is not transitioning
- Update circle's position during transform's transition in D3
- D3.js: how to follow general update pattern to transition nested elements?
- d3 multiline update path and transition path does not work with nested data
- D3.js update with transition
- How to correctly update the text value of an input element in a d3.js transition
- D3 Legend Transition On Update
- Rickshaw smooth update transition
- Update textPath after tween transition in D3
- Transition both circles and text (within g element) in single general update pattern
- How to auto update line transition using d3.js
- Transition circles and tooltip on update
- Update axis style in transition
- How to update the Y domain with a transition in D3.JS?
- D3 General update pattern transition not working on pie chart
- How to update data elements within a transition without deleting a re-creating everything?
- D3 v4 transition or update
- D3.js transition multiple lines - data doesn't update
- Update drag/scroll origin after an update of the data with transition in D3
- d3 - Update Width and X for smooth transition in Horizontal Stacked Bar Chart
- d3 js - update transition with multiple lines
- Can I update an ongoing d3 transition on drag
- Update stacked bar chart with transition in D3
- d3.js unable to use general update pattern and transition
- d3 stacked bar with bars don't update in a transition
- Invoke a callback at the end of a transition
- How to update axis using d3.js
- d3 update data and update graph
- Dynamically update chart data in D3
More Query from same tag
- Gettting both circles and labels to appear together on D3 graph
- Is it possible to save extra data in the node object of a forced layout
- ng-click won't work when added inside html template in controller angular.js
- Count and avg. with multi-level nesting in D3
- Nested SVG selections in D3
- How to create a custom color scale?
- Obtain Bootstrap Icon SVG in JS to use in D3
- Unable to add grid lines to bar chart
- d3 js .append("line") doesn't show up
- insert text in the links of the tree in d3
- Target SVG path to the middle of rect element
- D3/SVG: Why is this code slower when selection is changed?
- D3 Chart Angular Directive infobox alignment
- How to draw rounded corner rectangle in React Native ART
- How to set y-axis to fixed range in rickshaw?
- How to use quantile color scale in bar graph with drill-down?
- D3 Hierarchical Edge Bundling
- DB and D3 connection via php. Unable to complete D3noob's tutorial
- Layout temporal nodes along x-axis
- axis label restoring to original position after hiding series
- Using D3.js selection.data from Scala.js
- Unexpected d3 v4 tree behaviour
- D3 nesting - inconsistent number of levels
- d3js Pie Chart – text labels
- D3 - 2 different bar paddings
- Inverting bars on d3.js bar chart
- D3.js Circles on Map
- Tooltip scaled(zoom) along with d3 geo map
- d3js stacked bar chart with groups
- dc.js piechart legend: display only top 5