score:6
it seems to me that your problem is the fact that the graph is synchronous - "duration" is both used for animation and for graph shifting. essentially, changing duration will avail nothing.
you can introduce a time multiplier. then try dividing duration by two, and using a multiplier of 2. your actual data duration is now duration*timemultiplier (you might want to change the names to make it less confusing, or use a timedivider in the animation).
// shift domain
x.domain([now - (limit - 2) * duration * timemultiplier, now - duration * timemultiplier])
// slide x-axis left
axis.transition()
.duration(duration)
.ease('linear')
.call(x.axis);
// slide paths left
var t = paths.attr('transform', null)
.transition()
.duration(duration)
.ease('linear')
t.attr('transform', 'translate(' + x(now - (limit - 1) * duration * timemultiplier) + ')')
.each('end', tick)
another thing you might try is to add the points two at a time, i.e. you skip the shift on odd ticks, and shift double the amount on even ticks. this reduces the overhead at the expense of making the animation a bit jaggier (but not very much, because it also plays faster).
Source: stackoverflow.com
Related Query
- Using d3.js, how can I display data faster on my chart?
- how to display bottom data for row chart using dc.js
- how to get data from mongodb and display as a d3 chart using nodejs
- How can I program a line chart using D3.js to visualise a data which is received from a server side ?
- How can I position rotated x-axis labels on column chart using nvd3?
- how to create labels for data in donut chart using d3.js
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
- D3: How can I change data in an existing bar chart
- How to display data when using Rickshaw.Graph.Ajax
- NVD3 Line Chart doesn't display when data passed using ajax - data.map is not a function
- How can i bind an json data with a key and Name for display
- How to display second y-axis to right of grouped bar chart data in d3
- In d3.js, while importing csv files using a row conversion, how can I "slice" the data to only include a range of rows?
- how to display vertical grid with time series data using react-native-svg-charts
- how to display data from 1st point on words on y axis for line chart in d3.js
- Using d3 in meteor on windows 8.1, how can I display a world map, zoomed in on the US, with country borders and US state borders?
- How can I specify a d3.js selector using values from a data object?
- How do I display an icon at a point on a line chart using d3.js
- how i can put more lines in Line Plus Bar Chart using nvd3.js?
- How Can I display dates on the x-axis using nvd3 line charts
- In D3 I'm assigning a colour to a data category using d3.scale.ordinal(). How can I assign it based on value of x-axis?
- How to parse an array of objects using data method of d3js and display it in tool tip?
- How can I select a dot from a scatter and display data about it?
- How can I group data to be filtered without losing crossfilter functionality using dc.js?
- How to display "pie chart unavailable" message when all the data is 0 in a pie chart?
- Line chart - how to display data points whilst line path is being drawn
- How to display D3 Chart using directive?
- How do I pull nested data into a bar chart using D3?
- d3.js can not update the chart - using json data
More Query from same tag
- D3 PIE chart animate on enter and update angular app
- d3.js get JSON from url
- Angular-UI tooltips on d3.js svg elements
- How can I determine if a point is hidden on a projection?
- Two legend issues with d3 chart
- Spline path - 3D effect
- D3- How to display the ticks of a xAxis
- unable to plot polygons in d3.js "format" over leaflet.js
- Color grouped bar chart based on comparison of numbers d3
- Plotting points using d3.geo.tile
- how to modify xlink:href with jquery not working
- Need to create a line within x and y axis in d3 v5
- Add path but also text above the path - D3js v3?
- Leaflet Markercluster showCoverageOnHover triggered wrong
- angular.js and d3.js - geometric example
- d3.js dynamic data reload possibly related to exit().remove()
- Drawing directed edges with arrow in D3
- why does my page load super slow?(has GeoJSON and Javascript content)
- Problems in rendering D3.js Area Chart
- D3 loading data
- Labels on a d3 line chart
- limit number of tick marks in d3.js x axis with ordinal scale
- How to extend number of options in select tag using d3?
- dc.js: Multiple graphs in a single dimension
- D3.js SVG giving it an ID or adding the SVG to PDF
- Integrating d3.js sunburst as data studio community visualisation
- How can is draw rectangle based on two date?
- D3-Force updating parameters after initializing graph
- How to use quantile color scale in bar graph with drill-down?
- line d3.js graph shifting wrongly (to right)