D3 nasıl google harita üzerinde bir SVG yarattı genişlik ve SVG

uzunluğunu değiştirmek ve SVG nesnenin genişliği ve uzunluğuna kontrol etmek istediğinizD3 nasıl google harita üzerinde bir SVG yarattı genişlik ve SVG

büyüklüğü Tamam ama sorun bunun yeri SVG doğru yerde değil.

Nesnenin konumu üzerinde nasıl kontrol yapabilirim?

Ben

.attr("transform", "translate(" + width/2 + "," + height/2 + ")")

ama sonra boyut işe yaramadı için dönüşüm eklemek çalıştı. Ölçek eklemeyi ve projeksiyona çeviri yapmayı denediğimde, boyut da çalışmadı. Konum ve boyutta nasıl kontrol edebileceğimi söyleyebilir misiniz? SVG'nin ilk konumunun aynı konum olması gerektiği fikri yalnızca boyut değişmeli, ancak konum her zaman aynı olmalıdır. Ben zum değiştirdiğinizde ben soruyu yanlış anlama ediyorum sürece SVG'nin yerini

<!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>

kaynak

2012-06-04 user1365697

ile konumunu kontrol ediyorum bize-states.json dosyası eksik yükledikleriyle olabilir mi? – Nek

(1) dinamik olarak oluşturulmuş bir SVG belgesinin boyutunu (görüntünün tamamını) ekranda değiştirmeye çalışıp çalışmadığınızı veya (2) bir HTML sayfasındaki bir SVG belgesinin yerleşimini değiştirip değiştirmeyeceğinizi veya (3) açıklayabilir misiniz? SVG belgesinde belirli bir üretilen elemanın boyutunu değiştirmek veya (4) belirli bir üretilen elemanın SVG belgesi içerisindeki yerini değiştirmek mi? – Phrogz

Ayrıca, "zumu değiştirdiğimde SVG'nin de konumu değiştirdiğinden" _; Bunun ne anlama geldiğinden emin değilim, ancak muhtemelen ilgili cevaplar için http://stackoverflow.com/a/10714057/405017 adresini ziyaret edin. – Phrogz

değiştirmesini gündeme, sadece CSS kullanarak SVG boyutunu kontrol etmek mümkün olmalıdır. Yani, d3 yerine attr() kullanımını style() kullanarak:

layer.append("svg") 
    .style("width", width1) 
    .style("height", height1);

Benzer şekilde, sen .style("left", ...) ve .style("top", ...)

kaynak

2012-06-04 15:27:19 meetamit

yakınlaştırma değişikliği göre olacaktır. Ben sol ve üst stili eklemek için çalıştı zaman SVG nesnesini etkilemez – user1365697

D3 nasıl google harita üzerinde bir SVG yarattı genişlik ve SVG

cevap

İlgili konular