score:2
Accepted answer
You don't need the zoom behavior to explicitly zoom to a path, e.g.:
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [
width / 2 - scale * x,
height / 2 - scale * y];
svg.transition()
.duration(750)
.attr("transform", "translate(" +
translate + ")scale(" +
scale + ")");
Source: stackoverflow.com
Related Query
- D3.js zooming on specific path after loading finished
- d3.js force layout auto zoom/scale after loading
- Putting an arrow (marker) at specific point on a path when using the d3 javascript library
- SVG marker-mid on specific point on path
- D3 - How to get correct scale and translate origin after manual zoom and pan to country path
- How to apply d3.js svg clipping after zooming
- D3 Loading in CSV file then using only specific columns
- D3 Click event doesn't work after re-appending path
- SVG returns to its default scale and position after initializing it with specific scale and position
- Scale a path object after translating
- Add small rectangles inside BIG rectangles with unique Ids and links in D3? after an specific ID
- d3 v4: Clip path not updating after pan and zoom
- Access a specific path element using given ID
- Overriding the CSS causes D3JS tree path link to be visible after node expansion or collapse
- Change style after a d3 path has been clicked
- Change time intervals after zooming
- How to re-scale D3 map after zooming
- D3 Pie Chart new path values not being calculated after update
- There are duplicate viewreset events when loading different path features in Leaflet with D3.js
- How to show transition in d3 on one path after another?
- Selecting specific svg path based on JSON attribute in d3.js
- Attaching 'onclick' event to SVG element 'rect' after loading
- How to set a specific duration to interpolate along a path one point at time?
- d3 animated map: after zooming in, how to correctly project points when animation begins?
- Need to have two different colors in a linear gradient after a specific (x, y) point
- In D3.js how do I append a text element after having changed the attributes of my path element?
- D3.js : Loading js file after html
- how to access json object after loading it in d3
- Ghost line path when zooming and panning a D3 chart
- scope not updating after loading csv file with d3
More Query from same tag
- stacked bar chart in dimple.js
- How To Filter Data by Date Range on D3.js Line Chart?
- create a shape in d3.js by drag and drop of a DOM element
- PowerBI Custom Visual - d3.Selection error
- Dispatch event when you click in legend of pieChart nvd3
- Change rectangles to circles for sankeyNetwork in networkd3
- Rollup with d3 plugin : reference is not defined
- D3 Js resize svg from exisiting example
- Percentage Change in dc.js/crossfilter
- D3: How do you highlight a range of dates on D3 a line chart?
- Apply mapping to attached data
- How to set a scale for the time series, current x scale gives me NaN?
- Using jsPDF to render dynamic data on PDF template
- How do I define a value accessor for a stacked bar graph?
- Drawing one more element in a D3 legend
- Adding space Before and after the Svg:rect - d3.js
- Identify given array is a d3 selection
- D3.js animation for donut labels
- How to make a general function to create crossfilter.js dimensions
- How to drag nodes with children in d3 circle packing?
- d3 line does not draw
- Text shadow on networkD3 using HTMLWidget
- add text inside a rect in force layout graph d3.js
- How to create a JavaScript wrapper to be used with JavaFx WebView? Is JSNI an option?
- How to zoom via brush in d3 with non-standart axises
- Show data on map using D3
- How to draw the force chart in d3 v4?
- Item limit on d3.json observablehq
- How to auto update sub elements datum binding in D3
- DC bar chart Y axis with integer scale (not multiplicated)