score:1
Correct me if it didn't address your issue (maybe you can provide a minimal example showing where you are stuck, using JSFiddle for example), but if I understand well you want to move/zoom/center the displayed image on the extend of your country. Here is an example doing this (I also added some code on how the layer was added for consistency):
// Define the projection you want to use,
// setting scale and translate to some starting values :
var projection = d3.geoConicConformal()
.translate([0, 0])
.scale(1)
var layer_name = "your_layer_name";
var geo_features = topojson.feature(topoObj, topoObj.objects[layer_name]).features;
// Define the path generator :
var path = d3.geoPath().projection(projection);
var width = 800,
height = 600;
// This is the main svg object on which you are drawing :
var map = d3.select("body").append("div")
.style("width", width + "px")
.style("height", height + "px")
.append("svg")
.attr("id", "svg_map")
.attr("width", width)
.attr("height", height);
// Add you layer to the map
map.append("g").attr("id", layer_name)
.attr("class", "layers")
.selectAll("path")
.data(geo_features)
.enter().append("path")
.attr("d", path)
.attr("id", (d,i)=> "feature_" + i)
.styles({"stroke": "rgb(0, 0, 0)", "fill": "beige")
// Where the job is done :
scale_to_layer(layer_name)
function scale_to_layer(name){
var bbox_layer = undefined;
// use all the paths of the layer (if there is many features)
// to compute the layer bbox :
map.select("#"+name).selectAll('path').each(function(d, i){
var bbox_path = path.bounds(d);
if(bbox_layer === undefined){
bbox_layer = bbox_path;
}
else {
bbox_layer[0][0] = bbox_path[0][0] < bbox_layer[0][0]
? bbox_path[0][0] : bbox_layer[0][0];
bbox_layer[0][1] = bbox_path[0][1] < bbox_layer[0][1]
? bbox_path[0][1] : bbox_layer[0][1];
bbox_layer[1][0] = bbox_path[1][0] > bbox_layer[1][0]
? bbox_path[1][0] : bbox_layer[1][0];
bbox_layer[1][1] = bbox_path[1][1] > bbox_layer[1][1]
? bbox_path[1][1] : bbox_layer[1][1];
}
});
// Compute the new scale param, with a little space (5%) around the outer border :
var s = 0.95 / Math.max((bbox_layer[1][0] - bbox_layer[0][0]) / width,
(bbox_layer[1][1] - bbox_layer[0][1]) / height);
// Compute the according translation :
var t = [(width - s * (bbox_layer[1][0] + bbox_layer[0][0])) / 2,
(height - s * (bbox_layer[1][1] + bbox_layer[0][1])) / 2];
// Apply the new projections parameters :
projection.scale(s)
.translate(t);
// And redraw your paths :
map.selectAll("g.layer").selectAll("path").attr("d", path);
};
Also, note that this example use d3 v4 (but in this case it doesn't change a lot apart from the naming of geoPath
and geoConicConformal
)
Source: stackoverflow.com
Related Query
- standard coordinates in d3.js
- How to get coordinates of an svg element?
- How to get absolute coordinates of object inside a <g> group?
- d3 click coordinates are relative to page not svg - how to translate them (Chrome error)
- D3.js Brush Controls: getting extent width, coordinates
- D3's mouse coordinates relative to parent element
- What is the standard way to get the active (running) D3 v3 Transition for a given element?
- Get coordinates of mouse click on svg using d3
- How to get coordinates of slices along the edge of a pie chart?
- d3js Parallel Coordinates categorical data
- D3.js get nearest X & Y coordinates for Area Chart
- Parallel coordinates multidimensional data not visualised in D3
- d3.js Plot elements using polar coordinates
- D3 click coordinates after pan and zoom
- How can I convert SVG coordinates (x,y) defined relatively to an element into absolute coordinates/position?
- How to retrieve element's coordinates relative to an svg viewbox?
- svg: Coordinates of a character?
- d3.js zooming mouse coordinates
- D3 v4 - Detect click coordinates in zoomed area
- Finding x,y coordinates of a point on an Archimedean spiral
- shp2json produces GeoJSON with bounding and coordinates not in (-180,180) range
- d3.js extract coordinates of SVG path elements
- NaN coordinates on D3.js v4 layouts
- Plotly js and parallel coordinates plots
- Get coordinates of element relative to enclosing svg
- Parallel Coordinates with check box
- Log the x,y coordinates of nodes in a converged D3 force layout
- How to apply rotate transformation and don't change the coordinates system in D3.js?
- How to draw an ellipse from degree and coordinates
- D3 mouse coordinates after transform
More Query from same tag
- Dragging nodes with labels in d3 v4 force layout glitches
- Javascript Data Manipulation Inefficiency
- Color paths in d3.layout.tree
- Combining two charts in one div - d3 / css
- a.map is not a function error nvd3 with ng-repeat
- Accessing nested data from parent
- Flush a d3 v4 transition
- D3 Pie Chart rotate only the arcs
- CSV into JSON convert
- d3 barchart in jquery mobile -- why are there two checkboxes?
- Migrate from jsdom to phantomJS ? (basic DOM creation)
- Timeseries line-chart in dc.js - time Dimension not working
- D3.js: Animating a bezier curve
- How to transfrom/translate text element in d3?
- Updating circle radius and animate it in d3.js
- Alternative to d3.scaleQuantize?
- D3 getting JSON data within a JSON
- Uncaught TypeError: Cannot call method 'push' of undefined (d3 force layout)
- Grouping nodes in force directed graphs in d3.js
- d3.js Throbbing marker points on a map
- D3js Donut chart legend
- D3 bar plot with double x Axis for month and year
- Hide unrelated parent nodes but child node in D3.js
- C3.js horizontal bar chart - Highlight a specific x-axis tick together with bar
- d3.js scale doesn't place tick at the top
- D3 V4 zoom to feature in canvas with stream projection
- Overlaying circles on leaflet with d3 results in not positioned properly
- Minimal Intersection layout algorithm
- How to change a circle into a square with d3.js
- To remove minus sign from the values on the secondary Y-axis (Nvd3 -Multibar Horizontal Chart)