score:2
i see two separate issues with the way the zoom is working:
you are not selecting the
<circle>
s (points in the scatter plot) correctly when zooming. consequently when you zoom only the axes are changing (as you described). an easy way to fix this is to give each<circle>
a class (e.g.class="dot"
), and then use that to select them.first add the class="dot" to each of your circles (line ~140):
svg.selectall("dot") .data(data) .enter().append("circle") .attr("class", "dot")
then update the
function zoom
to select them correctly (line ~195):svg.selectall(".dot") // <---- select all circles with class "dot" .attr("cx", function(d) { return x(d.date); }) .attr("cy", function(d) { return y(d.close); });
right now the zoom only occurs when you try to zoom in on an axis or individual point. if you want a user to be able to zoom in no matter where their mouse is over your scatter plot, you can add a background
<rect>
that will make sure the zoom event is detected for the svg.svg.append("rect") .style("fill", "#fff") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom)
making these two changes fixes the zoom.
Source: stackoverflow.com
Related Query
- d3js: scatterplot zoom. Only axis is zooming not the data
- D3 zoom only affect in axis and not in data
- Data points and ticks in the scaleBand axis are not aligned
- Display only values from the data set into X axis ticks
- d3js x axis dates display month at the end not in the front
- How to zoom only on the X axis in a line chart in d3.js (v7)
- D3: The data on the axis not mapping
- d3 js axis does not match the actual data
- D3 v4 Scatterplot chart data points are not updating on zoom
- Zooming works only when hovering on the dots in scatterplot
- D3js Ordinal Axis does not show all the ticks
- d3 axis is not showing any values if there is only 1 value in the domain
- D3: Is it possible to zoom+pan one axis and only pan the other?
- D3js v4: scaleOrdinal does not have the rangePoints()
- Ticks only at the start and end of an axis
- d3js display arrow at the end of each axis
- d3js axis dates start and end value only
- D3.js: Zooming the x-axis and data with mouse wheel scroll
- D3.js zoom with Ordinal axis not working - Issue with setup of scale in zoom behavior?
- Text not displaying in the middle of circles in d3js
- d3js graph retaining old axis data on refreshing with new data
- Visualization data inserted in the webpage is not properly indented and not appearing at desired position
- d3js - the path is not drawing full values while using `defined`
- d3 zooming to mouse location, not the centroid
- How to set an initially determined zoom level based on data d3js
- Why is D3.js data only available to child nodes when enter() is chained, not invoked separately
- Why d3.domain() has only one element when I use the whole data array as domain?
- Do I have to re-join the whole data set even if only one property in one item changed?
- d3js nice() not rounding up axis domain
- the data is changed, but reloading does not fetch new data, D3
More Query from same tag
- D3 module on Drupal doesn't show examples
- Add y-axis gridlines to D3 Gantt chart
- Maximum value of the second column of an array
- Scale/zoom D3 layer on Leaflet map to layer bounds
- d3 Selecting data from an svg element
- Metricsgraphics Date access - Line graph
- Increase Distance Between Nodes in Network/Chart
- How to save d3 graph as image on local machine?
- Is it expensive to call D3.js transition multiple times during scroll?
- Aligning Natural Earth Geojson and Raster to render in D3
- source code in tickSize d3.js v4
- Responsive D3 Donut Chart on Screen Resize
- D3.js contour plot not working (Possible bug of d3 contour)
- D3.js: Measure frame rate
- How to set "resultDataContents" in Neo4jrb?
- Accessing d3.js element attributes from the datum?
- d3.js collapsible force diagram - assigning unique ID's to identical nodes
- How to invert d3 color ramps d3-scale-chromatic d3.interpolateViridis
- How to use d3.js in Phoenix?
- How to draw circles at different times with D3js?
- Importing a csv into d3; can't convert strings to numbers
- Remove old circles from scatter graph on update
- How to compare a property to the values from an array of object?
- d3 js transition not working
- Cannot bind JSON to d3
- Appended labels not appearing in chart d3.js
- How do I find the associated DOM element when I have the Data object in D3?
- Position relative is not working in Safari 11 Dagre-d3 svg
- Line passing through another point before connecting to node d3.js
- D3 V4: Updated data is being seen as new data? (Update function)