13
Tôi tạo ra một SVG trên bản đồ google và tôi muốn kiểm soát trên các chiều rộng và chiều dài của đối tượng SVGD3 làm thế nào để thay đổi chiều rộng và chiều dài của SVG
Kích thước là ok nhưng vấn đề rằng vị trí của SVG không ở đúng nơi.
Làm cách nào tôi cũng có thể kiểm soát vị trí của đối tượng?
Tôi cố gắng thêm transform cho
.attr("transform", "translate(" + width/2 + "," + height/2 + ")")
nhưng sau đó kích thước không làm việc. Khi tôi cố gắng thêm quy mô và dịch cho phép chiếu, kích thước cũng không hoạt động. Bạn có thể tư vấn cho tôi cách tôi có thể kiểm soát vị trí và kích thước không? Ý tưởng rằng vị trí đầu tiên của SVG phải là cùng một vị trí chỉ có kích thước nên thay đổi nhưng vị trí phải luôn giống nhau. Vấn đề hiện nay là khi tôi thay đổi zoom SVG cũng thay đổi vị trí
<!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>
thể bạn đính kèm thiếu chúng tôi-states.json tập tin? – Nek
Bạn có thể làm rõ việc bạn đang cố gắng (1) thay đổi kích thước của tài liệu SVG được tạo động (toàn bộ hình ảnh) trên màn hình hay (2) thay đổi vị trí của tài liệu SVG trong trang HTML hoặc (3) thay đổi kích thước của một phần tử được tạo cụ thể trong tài liệu SVG hoặc (4) thay đổi vị trí của một phần tử được tạo cụ thể trong tài liệu SVG? – Phrogz
Ngoài ra, bạn đề cập đến _ "khi tôi thay đổi thu phóng SVG cũng thay đổi vị trí" _; Tôi không chắc chắn điều này có nghĩa là gì, nhưng hãy xem http://stackoverflow.com/a/10714057/405017 để biết các câu trả lời có thể có liên quan. – Phrogz