score:1
tldr
y scale's domain contains still max value from whole dataset. update the domain of the y scale to the max value of the currently visible dataset, by filtering it first by the rescaled x scales' domain.
long version
i guess, your chart should only zoom in the x direction. under this assumption, you need to implement an auto scaling for the y axis yourself. the current problem is, that your y scale's domain contains the min and max values of your whole data set. now that you have zoomed the max value might be smaller.
so, what you need to do is, get the domain of the rescaled x scale domain. use that domain to filter your dataset for that time range and then pick the max value out of that time range filtered subset. then you update the domain for your y scale with that new max value and rerender. by the way, rescaling the y scale is not necessary, if you only want to do zoom on the x axis.
// global cache for the data
const data;
function zoomed(event) {
const xz = event.transform.rescalex(x);
const [minx, maxx] = xz.domain();
const filtereddata = data.filter((item) => item.date >= minx && item.date <= maxx);
y.domain([0, d3.max(filtereddata, d => d.value)]);
const yz = event.transform.rescaley(y);
path.attr("d", area(data, xz));
gx.call(xaxis, xz);
gy.call(yaxis, yz);
}
score:1
thanks for guidance: https://observablehq.com/@steve-pegg/zoomable-area-chart
changes below have worked.
function zoomed(event) {
var xz = event.transform.rescalex(x);
var startdate = xz.domain()[0];
var enddate = xz.domain()[1];
var fdata = data.filter(function (d) {
var date = new date(d.date);
return (date >= startdate && date <= enddate);});
y.domain([0, d3.max(fdata, function (d) { return d.value; })]);
path.attr("d", area(data, xz));
gx.call(xaxis, xz);
gy.call(yaxis, y);
}
Source: stackoverflow.com
Related Query
- Dynamic update to y-axis of a zoomable area chart
- Update the y-axis of a brushed area chart
- Stacked Area Chart in nvd3js - X Axis overflow
- Make a chart with area charts having both positive and negative y axis in dc or d3.js
- How do I implement d3's enter update exit pattern for an area chart with focus and context?
- D3.js Pie Chart Dynamic Update Transitions not Working as Expected
- d3js multi-line chart is being drawn off the plot area - is update pattern to the issue?
- Update the colored area of a line chart
- Billboardjs chart update visibility of y axis after chart generation
- Adding axis to the dynamic line chart in d3
- nvd3 orientation axis on area chart
- How do I update the y axis of the chart using D3 js
- D3 multiline chart on update crosses axis
- Y axis of chart doesn't update correctly in Billboard.js
- How to update axis in a chart with dispatch events d3js
- D3 scatter chart dynamic axis positions
- Graph line not moving with zoomable chart area
- String formatted date as X axis in stacked area chart
- D3 zoomable pack chart update
- How to update text in area chart when I change csv file on click in d3?
- How to update axis using d3.js
- Dynamically update chart data in D3
- d3.js chart area filling with different colors
- D3 line chart axis text labels in multi line
- How to update d3.js bar chart with new data
- conditional fill in d3.js for area chart
- Make simple bar chart using C3 with separate columns on the x axis
- d3js line chart error - drawing weird area
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- NVD3 Line Chart X Axis Ticks Are Missing
More Query from same tag
- Collapsible Sankey Diagram - D3
- Nested line chart not showing up
- How to implement D3 donut chart?
- Angular, D3 - Cannot read property 'forEach' of undefined
- draw a straight line between 2 coordinates in d3
- D3.js table not refreshing when data changes
- D3. Within a text string how do I style substrings?
- d3.js geo - rendering svg path
- D3 Scatterplot with thousands of data points
- Trying to update bar chart in d3.js
- Generating a simple bar chart with d3.js and an array of form data
- D3 update line graph
- What does the row function do in this D3 multi-series line graph?
- D3 Chaining Animations with a for loop
- D3.js Collapsible tree: Adding a label for each level
- javascript check if file exists
- Two layouts for same graph in d3.js?
- how can I turn strings into numbers in d3js
- d3plus.Geomap is not a constructor
- Animating GeoJSON paths in D3 + Leaflet
- D3 selectAll multiple classes AND or OR
- Can't access json from url d3.js
- Referencing the D3.js library from my webpage
- 0 fill null values with d3 series data
- What is the d3.js v4.0 equivalent for d3.scale.category10()?
- D3 - issue with applying scroll to legends container with in svg
- Drag a Line in d3
- D3 getting data from multiple column CSV
- Angular2 and D3.js Gantt chart
- Edit the data in a pie chart rather than create a new one