If the point disappears as you zoom in your probably have the wrong translate.
A d3 projection has a center. A coordinate in degrees that marks the center of the projection. The translate value is to what coordinate in pixels the center should be projected to.
- You have no center coordinate specified, so for a Mercator projection it is the default: [0°E,0°N]: a point off the coast of Africa.
- You don't show what coordinate you have for the translate, but the default is [480,250] - this is where the center coordinate will be renedered: 250 pixels from the left of the SVG/Canvas/Container, 480 pixels down from the top.
As we zoom in the center point remains projected to the translate point, everything else moves. If we zoom in far enough (ie increase the scale value enough), everything other than the center point will be out of frame:
So if when zooming in your feature drops off the map, we need a new center coordinate. Preferably select a coordinate within your features of interest and roughly in their geographic center. Now you can toy with a scale factor that will properly show your areas of interest.
Without setting a center - how is D3 to know what you want to focus on when you set the scale higher?
You haven't provided a geojson of your features or a description, so hopefully the above is enough for you to get a good result. However, there is an easier way.
When setting the map parameters by hand a center coordinate is useful and traditionally the translate value is the middle of the SVG/Canvas/Container. However,
projection.fitSize/fitExtent will set the translate and the scale values so that the features of interest will fill the specified pixel extent automagically.
This approach does not set the center coordinate - it translates the center coordinate off screen if necessary so that the geographic features of interests intersect the specified pixel extent. This means the translate value is dependent on scale, and we can't modify projection parameters after we use these fitting methods as easily as before.
With projection.fitSize() we specify the width and height of our SVG and the geojson object we wish to show:
projection.fitSize([width,height],feature). fitExtent is similar but allows margins to be specified (D3's documentation has details), there are also a few similar methods for different spacing options (again covered in the docs better than I can do here).
- How to change speed of translate and scale when zooming in and out in D3 (using zoom.on & d3.event.translate, d3.event.zoom)?
- D3 - How to get correct scale and translate origin after manual zoom and pan to country path
- How to use x and width in a bar chart with scaleTime?
- how to use .scale and .translate with d3.js?
- How to use d3.symbols with an ordinal scale
- How do you translate HTML elements along with SVG elements when zooming and panning with D3
- How can I use SVG translate to center a d3.js projection to given latitude and longitude values?
- How to scale and translate together?
- How can I scale my map to fit my svg size with d3 and geojson path data
- How to scale an integer to date with range and domain
- How to Maintain d3 Color Scale with Link Severing and Re-joining
- How to keep current zoom scale and translate level when re-rendering graph
- How do I use MongoDB data with D3 and Node?
- How do I use JSON and return data with D3
- How to load multiple csv files and use them mixed with each other
- how to use getElementById with getBBox to determine the svg width and height
- How to use enter(), exit() and update with horizontal "stacked" chart
- In D3, how to use SVG files as DOM objects with bound data and paths still exposed?
- How to use d3 with and express application - reference error: document is not defined
- How to use quantile color scale in bar graph with drill-down?
- How do I use a Java JSONArray with D3 and Dimple, passed using Spring MVC? I'm getting a 404 error
- How to use d3.layout.cloud.js to create a word cloud with a csv containing both words and their weight?
- How do I remove all children elements from a node and then apply them again with different color and size?
- How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
- D3 transform scale and translate
- How to use D3 selectAll with multiple class names
- How to properly add and use D3 Events?
- How to use d3.min and d3.max within a d3.json command
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
More Query from same tag
- Custom D3.js donut chart
- Change x scale of path dynamically d3.js
- How do I adjust zoom size for a point in D3?
- Using Shamsi/Persian Date in D3 and DC.js
- How to use Zooming with Pie in D3 charts?
- Svg- foreignObject placed with d3 does not render
- D3 Donut chart projected to sphere/globe
- how to start axis label at zero?
- How do I stop panning when moving a node ? Limit zooming too ? D3
- D3 - Can't get packed circles to work from csv
- Placing text at center of rectangle
- D3.js - Add elements in HTML - <script></script> location
- d3.js dynamic height change when uploaded to bl.ocks.org
- Drawing D3 paths one after the other
- Word Cloud Generator
- D3 update not updating new Array
- Using Angular components to populate tooltips triggered from D3 visuals
- How increase height dynamically by fixing width of the rect box in d3 js
- jquery click function on a d3.js node
- Stroke-dasharray tween on multiple paths
- Dynamically add button d3.js
- How to draw Zoomable Sunburst with angular directive?
- Amend d3 graph to include all points
- performing zoom with mouse wheel programmatically for D3 parallel coordinates plot
- Fade in bars one by one with D3
- csv implementation with cal-heatmap jquery
- Uncaught TypeError: t.rgb is not a function
- Reducing the number of ticks in billboard.js chart
- Stacked-to-Grouped Bars Transition