D3 come modificare la larghezza e la lunghezza SVG

ho creato uno SVG su google map e voglio controllare la larghezza e la lunghezza dell'oggetto SVGD3 come modificare la larghezza e la lunghezza SVG

La dimensione è ok, ma il problema che la posizione del SVG non è nel posto giusto.

Come posso controllare anche la posizione dell'oggetto?

ho provato ad aggiungere trasformare per il

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

ma allora la dimensione non ha funzionato. Quando ho provato anche ad aggiungere scala e tradurre alla proiezione, anche la dimensione non ha funzionato. Potresti consigliarmi come posso controllare la posizione e le dimensioni? L'idea che la prima posizione di SVG dovrebbe essere nella stessa posizione solo la dimensione dovrebbe cambiare, ma la posizione dovrebbe essere sempre la stessa. La questione attuale che quando cambio lo zoom del SVG anche cambiare la posizione

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

fonte

2012-06-04 user1365697

Ci può-states.json allegare file mancante? – Nek

Potrebbe chiarire se si sta tentando di (1) modificare le dimensioni di un documento SVG creato dinamicamente (immagine intera) sullo schermo, o (2) modificare la posizione di un documento SVG in una pagina HTML o (3) cambiare la dimensione di un particolare elemento generato all'interno del documento SVG, o (4) modificare il posizionamento di un particolare elemento generato all'interno del documento SVG? – Phrogz

Inoltre, si cita _ "quando cambio lo zoom SVG cambia anche la posizione" _; Non sono sicuro di cosa significhi, ma consulta http://stackoverflow.com/a/10714057/405017 per eventuali risposte correlate. – Phrogz

A meno che io sto equivoco la questione, si dovrebbe essere in grado di controllare le dimensioni del SVG semplicemente utilizzando i CSS. Così, con d3, piuttosto che usare attr() uso style():

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

Analogamente, si potrebbe controllare la posizione con .style("left", ...) e .style("top", ...)

fonte

2012-06-04 15:27:19 meetamit

Quando ho provato ad aggiungere lo stile di sinistra e in alto influenzare l'oggetto SVG – user1365697

D3 come modificare la larghezza e la lunghezza SVG

risposta

Problemi correlati