Menu
I created a SVG on google map and I want to control on the width and length of the SVG object
The size is ok but the problem that the location of the SVG is not in the right place.
How i can control also on the location of the object ?
I tried to add transform for the
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
but then the size didn't work. When I tried also to add scale and translate to the projection the size also didn't work. Could you advise me how I can control on the location and the size ? The idea that the first location of the SVG should be the same location only the size should change but the location should be always the same. The current issue that when I change the zoom the SVG also change the location
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
html,body,#map {
width: 95%;
height: 95%;
margin: 0;
padding: 0;
}
.stations,.stations svg {
position: absolute;
}
.stations svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.stations circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
.background {
fill: none;
pointer-events: all;
}
#states path:hover {
stroke: white;
}
#state-titels text {
font-family: "ff-dagny-web-pro-1", "ff-dagny-web-pro-2", sans-serif;
font-size: 8px;
font-weight: 700;
font-style: normal;
font-size-adjust: none;
color: #333333;
text-transform: none;
text-decoration: none;
letter-spacing: normal;
word-spacing: 0;
text-align: start;
vertical-align: baseline;
direction: ltr;
text-overflow: clip;
}
#states path {
fill: #ccc;
stroke: #fff;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
//Create the Google Map…
var first = 1;
var zoom = 2;
var map = new google.maps.Map(d3.select("#map").node(), {
zoom : 2,
center : new google.maps.LatLng(-53.76487, -110.41948),
mapTypeId : google.maps.MapTypeId.TERRAIN
});
google.maps.event.addListener(map, 'zoom_changed', function() {
zoom = map.getZoom();
});
var width = 10000, height = 1000, centered;
var projection = d3.geo.albersUsa();
var path = d3.geo.path().projection(projection);
var count = 1;
d3.json("../d3/us-states.json", function(json) {
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div");
var width1 = 1000;
var height1 = 1000;
var svg = layer.append("svg").attr("width", width1).attr(
"height", height1);
var states = svg.append("g").attr("id",
"states");
states.selectAll("path").data(json.features).enter()
.append("path").attr("d", path)//.attr("transform", "scale(" + (zoom) + ")")//.each(transform)
.style("opacity", "0.7");
overlay.draw = function() {
if ( zoom == 2)
states.transition().attr("transform", "scale(" + (zoom / 8 ) + ")").style("stroke-width", 2 / zoom + "px");
else if ( zoom == 3)
states.transition().attr("transform", "scale(" + (zoom / 6 ) + ")").style("stroke-width", 2 / zoom + "px");
else if ( zoom == 4)
states.transition().attr("transform", "scale(" + (zoom / 4 ) + ")").style("stroke-width", 2 / zoom + "px");
else if ( zoom == 5)
states.transition().attr("transform", "scale(" + (zoom / 2 ) + ")").style("stroke-width", 2 / zoom + "px");
};
};
overlay.setMap(map);
});
</script>
</body>
</html>
678
Any height or width you set for the SVG with CSS will override the height and width attributes on the <svg> . So a rule like svg {width: 100%; height: auto;} will cancel out the dimensions and aspect ratio you set in the code, and give you the default height for inline SVG.
Although the SVG element does have height and width attributes, these might not be specified as pixels, but any of a number of units, so they aren't necessarily a lot of help.
The viewBox attribute defines how an SVG scales up. To take advantage of it, use viewBox to define the aspect ratio for your graphic, and allow the browser to flexibly decide what size it should be displayed on a reader's screen. Consider the following two examples using d3. js.
SVG stands for Scalable Vector Graphics. SVG is an XML-based vector graphics format. It provides options to draw different shapes such as Lines, Rectangles, Circles, Ellipses, etc. Hence, designing visualizations with SVG gives you more power and flexibility.
Unless I'm misunderstanding the question, you should be able to control the size of the SVG simply by using CSS. So, with d3, rather than using attr() use style():
layer.append("svg")
.style("width", width1 + 'px')
.style("height", height1 + 'px');
Similarily, you'd control the position with .style("left", ...) and .style("top", ...), presuming your svg is absolutely positioned.
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
