D3 cómo cambiar la anchura y la longitud de SVG

creé un SVG en Google Map y quiero controlar la anchura y longitud del objeto SVGD3 cómo cambiar la anchura y la longitud de SVG

El tamaño está bien, pero el problema de que la ubicación de la SVG no está en el lugar correcto.

¿Cómo puedo controlar también la ubicación del objeto?

He intentado añadir a transformar para el

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

pero el tamaño no funcionaba. Cuando intenté también agregar una escala y traducir a la proyección, el tamaño tampoco funcionó. ¿Podría decirme cómo puedo controlar la ubicación y el tamaño? La idea de que la primera ubicación del SVG debe ser la misma ubicación solo cambia el tamaño, pero la ubicación debe ser siempre la misma. La edición actual de que cuando cambie el zoom del SVG también cambiar la ubicación

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

Fuente

2012-06-04 user1365697

Podría usted-states.json adjuntar archivos que faltan? – Nek

Podría aclarar si está intentando (1) cambiar el tamaño de un documento SVG creado dinámicamente (imagen completa) en la pantalla, o (2) cambiar la ubicación de un documento SVG en una página HTML, o (3) cambiar el tamaño de un elemento generado particular dentro del documento SVG, o (4) cambiar la ubicación de un elemento generado particular dentro del documento SVG? – Phrogz

Además, mencionas _ "cuando cambio el zoom, el SVG también cambia la ubicación" _; No estoy seguro de lo que esto significa, pero vea http://stackoverflow.com/a/10714057/405017 para respuestas posiblemente relacionadas. – Phrogz

A menos que me no entender la pregunta, debe ser capaz de controlar el tamaño de la SVG simplemente mediante el uso de CSS. Por lo tanto, la D3, en lugar de utilizar attr() uso style():

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

Similarmente, usted controla la posición y con .style("left", ...).style("top", ...)

Fuente

2012-06-04 15:27:19 meetamit

Cuando traté de agregar el estilo de la izquierda y la parte superior, don Afecta al objeto SVG – user1365697

D3 cómo cambiar la anchura y la longitud de SVG

Respuesta

Cuestiones relacionadas