score:2
Accepted answer
var zoom = d3.behavior.zoom() //zoomyaxis
.x(xscale)
.y(yscaleleft)
.on("zoom", function(){
// don't let double-click or scroll wheel do anything
if (d3.event.sourceevent == null || d3.event.sourceevent.type == "wheel"){
zoom.scale(previousscale);
zoom.translate(previoustranslate);
zoomright.scale(previousscale);
zoomright.translate(previoustranslate);
return;
}
// set previous scale for future use
previousscale = zoom.scale();
previoustranslate = zoom.translate();
//zoom.translate(panlimit());
//zoomright.translate(zoom.translate());
// update the right side scale
zoomright.scale(previousscale);
zoomright.translate(previoustranslate);
// redraw lines
svg.select("path.line.lineleft").attr("d", linecases(data));
svg.select("path.line.lineright").attr("d", linedeaths(data));
// redraw axes
svg.select(".x.axis").call(xaxis);
svg.select(".y.axis.yleft").call(yaxisleft);
svg.select(".y.axis.yright").call(yaxisright);
});
i eventually got this working. i don't need the clip-path to work in the jsfiddle because it works in our actual project. additionally, i didn't end up limiting the pan functionality because it got very complex with the math. so i just put a reset button on it.
Source: stackoverflow.com
Related Query
- D3.js zooming with axis
- D3js Zooming chart with polylinear axis
- dealing with dates on d3.js axis
- converting numbers on y axis to string with K for thousand d3.js
- d3 time scale x axis with unix timestamp
- D3.JS time-series line chart with real-time data, panning and zooming
- Make simple bar chart using C3 with separate columns on the x axis
- Zooming bar-graph with d3.js
- Time axis in d3.js with specific time zone
- d3 US state map with markers, zooming transform issues
- Angular 4 + D3v4 : dragging circle not working correctly in conjunction with zooming
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- Horizontal pan with ordinal x axis in d3
- Creating an endless horizontal axis with d3 v4
- d3 v5 axis with Typescript = type errors
- Issues with Datamaps D3 Pin/marker constant size and relative position while zooming
- DC.js bar chart with date axis
- Make a chart with area charts having both positive and negative y axis in dc or d3.js
- With D3, how can I set attribute ("fill", "none") of axis path and line, but not text (without editing stylesheet)
- D3.js: Zooming the x-axis and data with mouse wheel scroll
- Multiples with x/y axis and mouseover example - line path shows wrong values
- Need help lining up x axis ticks with bars in D3.js bar chart
- d3 - disable scrolling when zooming with mouse wheel?
- Moving scatter plot circles with context zooming and brush in D3
- dc.js bar chart with ordinal x axis scale doesn't render correctly
- Replace the decimal dot with a comma on an axis in D3?
- D3.js zoom with Ordinal axis not working - Issue with setup of scale in zoom behavior?
- Map zooming with D3 and Datamaps
- d3js graph retaining old axis data on refreshing with new data
- zooming on svg with d3 in angular
More Query from same tag
- Stroke rendering inside of Topojson area. How to change the style of the full shape?
- In d3.js , Is there any way to get the path length at particular point?
- Angular & D3.js: Why is element[0] undefined?
- How can I update my graph legend in d3.js?
- D3.js replace a tsv file with an array
- d3 not showing added html elements
- force-directed d3.js add edge labels
- d3.js brush fill color histogram
- Prevent negative values in NVD3 chart axis
- Simulating Enter Key Press on Input in Karma/Jasmine Tests
- D3 console.log in a function chain
- Selecting only a subset in d3.select
- D3 tooltip not appearing near mouse
- Line chart alignment with different data sets
- D3.JS unable to load very large .csv file
- how to create dots(scatterplot) on a line in a d3 line chart
- D3 : best way to find max value in a JSON object
- How to set Chart dimensions to change as per given data
- D3 access html attribute
- d3.js using functions within d3.js-specific functions
- Seeing "Uncaught TypeError: Cannot read property 'weight' of undefined" despite following instructions to the letter
- D3 v5 Zoom Stutter
- Binding data to each element using HTML textarea
- domain / padding in d3.js linear scales
- Change the thickness of an axis in billboard.js
- d3 cross-linked mouseOver nodes
- d3.js animate line drawing happens in opposite direction as expected
- d3 - how to format date on x-axis
- d3 create svg from JSON paths
- D3 Scale graph as a new bar is added