13
की लंबाई मैं गूगल मानचित्र पर एक एसवीजी बनाया बदलने के लिए और मैं चौड़ाई और एसवीजी वस्तु की लंबाई पर नियंत्रित करना चाहते हैंडी 3 कैसे चौड़ाई और एसवीजी
आकार ठीक है लेकिन समस्या यह है कि के स्थान एसवीजी सही जगह पर नहीं है।
मैं ऑब्जेक्ट के स्थान पर भी कैसे नियंत्रित कर सकता हूं?
मैं
.attr("transform", "translate(" + width/2 + "," + height/2 + ")")
लेकिन फिर आकार काम नहीं किया के लिए बदलने जोड़ने की कोशिश की। जब मैंने स्केल जोड़ने और प्रक्षेपण में अनुवाद करने की कोशिश की तो आकार भी काम नहीं करता था। क्या आप मुझे सलाह दे सकते हैं कि मैं स्थान और आकार पर कैसे नियंत्रण कर सकता हूं? विचार यह है कि एसवीजी का पहला स्थान एक ही स्थान होना चाहिए, केवल आकार बदलना चाहिए, लेकिन स्थान हमेशा एक जैसा होना चाहिए। वर्तमान मुद्दा जब तक मैं सवाल गलत समझ रहा हूँ कि जब मैं ज़ूम बदलने एसवीजी भी स्थान
<!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>
साथ स्थिति को नियंत्रित करता हूँ आप हमें-states.json फ़ाइल गुम देते सकता है? – Nek
क्या आप कृपया यह स्पष्ट कर सकते हैं कि आप (1) स्क्रीन पर गतिशील रूप से बनाए गए एसवीजी दस्तावेज़ (संपूर्ण छवि) के आकार को बदलने की कोशिश कर रहे हैं या (2) किसी HTML पृष्ठ में किसी SVG दस्तावेज़ की नियुक्ति को बदलें या (3) एसवीजी दस्तावेज के भीतर किसी विशेष जेनरेट किए गए तत्व के आकार को बदलें, या (4) एसवीजी दस्तावेज़ के भीतर किसी विशेष जेनरेट किए गए तत्व की नियुक्ति को बदलें? – Phrogz
इसके अलावा, आप _ का उल्लेख करते हैं "जब मैं ज़ूम बदलता हूं तो एसवीजी भी स्थान बदलता है" _; मुझे यकीन नहीं है कि इसका क्या अर्थ है, लेकिन संभावित रूप से संबंधित उत्तरों के लिए http://stackoverflow.com/a/10714057/405017 देखें। – Phrogz