D3, как изменить ширину и длину SVG

Я создал SVG на карте Google, и я хочу, чтобы контролировать по ширине и длине объекта SVGD3, как изменить ширину и длину SVG

Размер нормально, но проблема, что местонахождение SVG находится не в нужном месте.

Как я могу контролировать также местоположение объекта?

Я пытался добавить преобразование для

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

, но тогда размер не работал. Когда я попытался добавить масштаб и перевести на проекцию, размер тоже не сработал. Не могли бы вы посоветовать мне, как я могу контролировать местоположение и размер? Идея, что первое местоположение SVG должно быть в том же месте, только размер должен измениться, но местоположение должно быть всегда одинаковым. В настоящее время проблемы, когда я изменить зуммирование 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>

источник

2012-06-04 user1365697

Не могли бы вы нам не хватает с присоединением-states.json файл? – Nek

Не могли бы вы пояснить, пытаетесь ли вы (1) изменить размер динамически созданного документа SVG (всего изображения) на экране или (2) изменить размещение документа SVG на HTML-странице или (3) изменить размер определенного сгенерированного элемента в документе SVG или (4) изменить размещение определенного сгенерированного элемента в документе SVG? – Phrogz

Также вы указываете _ «когда я изменяю масштаб, SVG также меняет местоположение» _; Я не уверен, что это значит, но см. Http://stackoverflow.com/a/10714057/405017 для возможных ответов. – Phrogz

Если я не уверен, непонимание вопроса, вы должны быть в состоянии контролировать размер SVG просто с помощью CSS. Так, с d3, а не с помощью attr() использования style():

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

, подобным образом, вы бы контролировать положение с .style("left", ...) и .style("top", ...)

источник

2012-06-04 15:27:19 meetamit

Когда я попытался добавить стиль слева и сверху, влияют на объект SVG – user1365697

D3, как изменить ширину и длину SVG

ответ

Смежные вопросы