dynamically set svg size on window resize

[Norman Khine]

hello,

i have the following code:

function myClient() {

  if (!(this instanceof arguments.callee)) {

    return new arguments.callee(arguments);

  }

  var self = this;

  this.init = function() {

    self.viewDidResize();

    self.drawSvg();

  };

  this.viewDidResize = function () {

      var width = $('body').width(),

          windowHeight = $(window).height(),

          mapCanvasHeight = width * (369.0 / 567.0);

      console.log(self.svg);

      self.svg.setSize(width, mapCanvasHeight);

      $('#map').css({

        'margin-top': 10

      });

    }

  this.drawSvg = function() {

    var data;

    var width = $('body').width();

    // Most parts of D3 don"t know anything about SVG—only DOM.

    self.svg = d3.select("#map").append("svg:svg")

                //.attr("width", "100%").attr("height", "100%");

                 //better to keep the viewBox dimensions with variables

                //.attr("viewBox", "0 0 " + width + " " + mapCanvasHeight );

                .attr('viewBox', '0 0' + width + '369');

    self.map = d3.geo.equirectangular();

    self.projection = d3.geo.path().projection(self.map);

    self.countries = self.svg.append("svg:g").attr("id", "countries");

    // Load data from .json file

    d3.json("../data/world-countries.json", function(json) {

...

var  myClient;

jQuery(function() {

   myClient = new  myClient();

  $(window).resize(function() {

      console.log("window resized");

       myClient.viewDidResize();

    });

});

what is the correct way to make resize the map when the navigator window is resized. is there a way to set the size, like

self.svg.setSize(width, mapCanvasHeight);

thanks

[Simon Russell]

You're using the 'width' and 'height' attributes on the svg (well, they're commented out) -- that's what I would head towards.  Just set them with non-percent values, replacing your call to setSize.

I imagine you may also want to put spaces around your viewbox width, as you have in the commented out line above.

[Chris Viau]

Your viewbox attribute is not enough? http://tributary.io/inlet/4268238/

[Norman Khine]

On Tuesday, January 8, 2013 2:19:07 AM UTC+1, Chris Viau wrote:

Your viewbox attribute is not enough? http://tributary.io/inlet/4268238/

thank you, this was it. 

[Matteo Gazzin]

Hi Chris, using your solution the content of the 'graph' is also modified: for instance look at the stroke-width of your circle.

If the graph has axis or labels they will be modified too. Is it right, or I miss something?
Is it a way to avoid this behaviour? 

In other words:

1) chart rendered at a resolution (w,h)

2) window resize event changes resolution to (w1,h1)

3) Need I redraw entirely the chart or not?

Thanks,

Matteo.

[Chris Viau]

Yes, you need to redraw the chart. The viewBox attribute is only good for simple cases. The labels will be elongated too, unless you constrain the ratio with preserveAspectRatio

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Matteo Gazzin]

Ok, thanks a lot.