D3, wie die Breite und Länge von SVG ändern

mir eine SVG auf Google Karte erstellt, und ich möchte auf der Breite und Länge des SVG Objekts steuernD3, wie die Breite und Länge von SVG ändern

Die Größe ist in Ordnung, aber das Problem, dass die Position der SVG ist nicht am richtigen Ort.

Wie kann ich auch auf den Standort des Objekts steuern?

Ich habe versucht, für die

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

hinzufügen zu verwandeln, aber dann hat die Größe nicht. Als ich auch versuchte, Maßstab hinzuzufügen und zu der Projektion zu übersetzen, funktionierte die Größe auch nicht. Können Sie mir Ratschläge geben, wie ich den Standort und die Größe kontrollieren kann? Die Idee, dass der erste Ort des SVG sollte der gleiche Ort sein, nur die Größe sollte sich ändern, aber der Standort sollte immer der gleiche sein. Die aktuelle Ausgabe, wenn ich den Zoom ändern auch die SVG

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

Quelle

2012-06-04 user1365697

Könnten Sie attach fehlt uns-states.json-Datei? – Nek

Könnten Sie bitte klären, ob Sie versuchen, (1) die Größe eines dynamisch erstellten SVG-Dokuments (gesamtes Bild) auf dem Bildschirm zu ändern, oder (2) die Platzierung eines SVG-Dokuments in einer HTML-Seite ändern oder (3) die Größe eines bestimmten generierten Elements im SVG-Dokument ändern oder (4) die Platzierung eines bestimmten generierten Elements im SVG-Dokument ändern? – Phrogz

Erwähnen Sie auch _ "wenn ich den Zoom verändere, ändert das SVG auch den Ort" _; Ich bin mir nicht sicher, was das bedeutet, aber http://stackoverflow.com/a/10714057/405017 für mögliche Antworten. – Phrogz

den Standort ändern, wenn ich die Frage bin Missverständnis, sollten Sie mithilfe von CSS die Größe der SVG einfach steuern können. Also, mit d3, anstatt attr() Verwendung style():

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

Ähnlich, dann würden Sie die Position steuern mit .style("left", ...) und .style("top", ...)

Quelle

2012-06-04 15:27:19 meetamit

Wenn ich versuchte, den Stil von links hinzuzufügen und es zu übersteigen Auswirkungen auf das SVG-Objekt – user1365697

D3, wie die Breite und Länge von SVG ändern

Antwort

Verwandte Themen