d3.js - D3 how to change the width and length of SVG -


i created svg on google map , want control on width , length of svg object

the size ok problem location of svg not in right place.

how can control on location of object ?

i tried add transform 

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

but size didn't work. when tried add scale , translate projection size didn't work. advise me how can control on location , size ? idea first location of svg should same location size should change location should same. current issue when change zoom svg change location

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

unless i'm misunderstanding question, should able control size of svg using css. so, d3, rather using attr() use style():

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

similarily, you'd control position .style("left", ...) , .style("top", ...)


Comments

Post a Comment

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

i need display gallery of photos. here template: @(photos: list[photo]) @title = { <bold>gallery</bold> } @main(title,"photo"){ <ul class="thumbnails"> @for(photo <- photos) { <li class="span3"> <a href="#" class="thumbnail"> <img src="@photo.path" alt=""> </a> </li> } </ul> } and here controller method: public static result getphotos() { return ok(views.html.photo.gallery.render(photo.get())); } and here photo bean : @entity public class photo extends model { @id public long id; @required public string label; public string path; public photo(string path, string label) { this.path = path; this.label = label; } private static finder<long, photo> find = new finder<long, photo>( long.class, photo.class); public static list<phot...
Read more

gmail - Is there any documentation for read-only access to the Google Contacts API? -

i want read-only access user's google contacts. there stackoverflow member wanted this, , received following answer : yes, there is, use https://www.googleapis.com/auth/contacts.readonly scope , "view contacts". this exchange reference read-only access google contacts can find using google. simply using access token obtained attempt read usual google contacts api (i.e. https://www.google.com/m8/feeds ) fails insufficient permissions. similarly, using google contacts api on new target fails 404 errors (for example https://www.googleapis.com/auth/contacts.readonly/default/full ). is there documentation anywhere on how use api, or permissible way access google contacts api full read-write access?
Read more

php - Controller/JToolBar not working in Joomla 2.5 -

relevant code: jtoolbarhelper::custom('savecategories', 'save', '', 'save', false, false); ... <input type="hidden" name="controller" value="easyblogcontroller"> according can dig docs , own previous questions, should call savecategories() function in easyblogcontroller . i've tried setting value easyblog , easyblog.php (file name) current easyblogcontroller (class name). clicking on save button refreshes page. not redirect, echo or var_dump test code put in savecategories() function. var_dump ing jrequest::getvar('controller') , 'task' return correct values. creating controller object , using $controller->execute('task'); works. the values going depend on location of controller trying call, , have couple options here. typically there controller in base folder of component (likely components/com_easyblog) in file called controller.php , class name inside ...
Read more