In d3.js how to create a dynamic scale value for projection?

Question

Am beginner for d3.js. I create a geomap with using d3.js.My map is working fine but i have some problem in scaling.

I need to display my map with full screen of the window.

So i created with using below code.

  // Html Part
  <div id="world-placeholder" style="width:100%;height:auto;">

  </div>

  // Script part for generating SVG
  <script>

        var svg = d3.select('#'+id)
                  .append('svg');

        // Set Width & Hight
        var width = $("svg").parent().width();      
        var height = width/2;                       

        // Set Projection
        var projection = d3.geo.robinson()
            //.scale(100)
            //.scale((width/height)*100)
            .translate([width/2, height/2]);

        // Set Path
        var path = d3.geo.path()        
            .projection(projection);
</script>

Basically am trying to plot the map with using current width of the screen by using $("svg").parent().width();

So my question is how to stretch my map with full screen.

Result screen Before Scaling (Not used any scaling)

Before Scaling

Result Screen After Scaling (Used scale(200) for stretching)

After Scaling

Scaling Code Part

  var projection = d3.geo.robinson()
            .scale(200)
            .translate([width/2, height/2]);

How to Scale dynamically based on window size? or any other way to display a map with full screen for all devices?

Please help me to solve.

Thanks in advance.

possible duplicate of [Whats the best way to make a d3.js visualisation layout responsive?](http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive) — Ian, Feb 25 '15 at 12:32

score 0 · Answer 1 · answered Feb 25 '15 at 10:56

0

I use something like this for screen size :

var GUIWidth = window.innerWidth; //-screen width
var GUIHeight = window.innerHeight; //-screen height

Maybe creating a JSFiddle would help people solve your problem easier :)

answered Feb 25 '15 at 10:56

AJ_91

581
4
16

Rudra · Answer 2 · 2015-02-25T12:34:43.793

0

You can even use:
document.getElementById("cont").clientHeight and document.getElementById("cont").clientHeight
for calculating dynamic width and height of your container. In this case "cont" is a div with 100% height and width.

edited Feb 25 '15 at 12:34

answered Feb 25 '15 at 12:27

Rudra

1,678
16
29

In d3.js how to create a dynamic scale value for projection?

Result screen Before Scaling (Not used any scaling)

Result Screen After Scaling (Used scale(200) for stretching)

2 Answers2