you can get around this problem in 2 step.
in function update() : redraw you .data() with the new point at the end but without remove the first old point (with animation), like that each key is the same before and after transition.
at the end of function update() : you can remove the old value and redraw .data() without animation.
The problem is that you're deleting data when there is too much. The way d3 matches data to existing data (when you call the
.data() function) is by index. That is, the first element in the array that you pass to
.data() matches the first bound data element, regardless of what the data actually looks like.
What happens in your case is that as soon as you start deleting data, the individual data points are updated instead of shifted. That's why you're seeing the "squiggle" -- it's updating each data point to its new value, which is the value the data point to the right had before.
With the code you currently have, this is hard to fix because you are not matching the data for individual lines explicitly. I would recommend that you have a look at nested selections which allow you to draw multiple lines and still explicitly match the data for individual ones. The key is to use the optional second argument to
.data() to supply a function that tells it how to match the data (see the documentation). This way you can tell it that some data points disappeared and the other ones should be shifted.
- D3 multi line chart - strange animation
- D3 line chart axis text labels in multi line
- dc.js Series Chart multi line
- Multi Line Ordinal d3 chart
- d3: tooltips on multi series line chart at each line when mouse hover event
- simple multi line chart with D3
- d3.js multi y-axis line chart
- D3 - Single and Multi Line chart tooltips
- Legend in Multi line chart - d3
- Animation of line chart with D3.js (v4)?
- Multi line chart using d3 and json in a nvd3 structure
- SVG Legend for multi line chart d3 v6
- D3 Multi Line Chart Not Displaying Properly With X Axis Value
- Error displaying dots on a multi series line - dots chart
- Fill same line color in to circle on Multi Line chart when mouse over and remove color from circle when mouse out
- Color overlapped portions of multi line chart
- D3 Multi Series Line chart not working with correct xAxis values
- D3 v4 Multi line chart Brush Issue NaN when moving brush
- dc.js multi line series chart filtering
- Using D3, I am trying to add and remove lines from a multi line chart when the legend is clicked
- Strange Label/Tooltip behavior, nvd3 line chart
- Creating scatter points on a multi line chart
- d3.js - Multi series line chart tool tip issue
- Custom animation in plottable.js line chart
- multi line chart nvd3 not shown properly
- Animation is not working for d3 line chart
- Animated Path multi series line chart in D3.Js
- D3 Multi Series Line Chart with Clickable Legend
- d3.js multi line chart with brush
- how to make real time multi line chart using d3 where data is from api in json format
More Query from same tag
- bl.ocks d3 visualization got cut off by the visualization box
- How to find out what can be exported from npm package
- Converting object array to hierarchical data structure
- constant index passed to event handler in d3.js
- Replace current svg with new svg deleting older DOM elements as well
- D3 create buttons from an array of string containing names
- How to make sense of `interpolateTransformCss`, `interpolateTransformSvg` in `d3-interpolate` with simple examples?
- d3 v4 voronoi find nearest neighbours in a scatterplot svg filled with (dots / circles)
- d3js v4: Only show labels on x-axis
- Run an java script after controller has been loaded in CodeIgniter
- NaN node positions after setting initial position in d3 force-directed network
- selection.exit().remove() method does not do overwriting or deletion
- D3.js setting multiple styles dynamically
- d3.js plot airport map points on map with coordinates on different file
- Processing hierarchical JSON data with d3.js
- D3 - partly force directed graph
- AngularJS unable to Load data from Service
- How do we pass data into this.state - React.js?
- Manipulating Bars
- Build issue angular 5 has no exported member 'DSVRowAny'
- bootstrap form-inline not rendering properly with d3
- Trouble with d3 line charts with points
- Preventing d3 translation value in zoom event moving beyond bounds
- d3 tree with aligned leaves
- C3.js - Nested JSON objects, How to access and load data?
- Crossfilter can't filter one dimension by another
- d3.js dynamically generated sentence map with curved text
- D3.js Enter Animation
- Cannot read property 'drag' of undefined D3