OpenLayer 2 and D3.js:Set the size of the SVG overlay

[المشرف العام]

I am following an example of D3.js used in conjunction with OpenLayers 2 to display GeoJSON on a map.

http://bl.ocks.org/mbertrand/raw/5218300/quakes.html

In this example, the author set the bounds of the vector collection to be the size of SVG overlay

var bounds = d3.geo.bounds(collection), path = d3.geo.path().projection(project);var bottomLeft = project(bounds[0]), topRight = project(bounds[1]);svg.attr("width", topRight[0] - bottomLeft[0]) .attr("height", Math.abs(topRight[1] - bottomLeft[1]))but in my codepen, I got a negative value in topRight[0] - bottomLeft[0].

http://codepen.io/shevawen/pen/ojqpRM?editors=001

An error shows in Chrome like this,

Error: Invalid negative value for attribute width="-134.70037333332988"after set the svg.attr to a fixed value, its OK.

svg.attr("width", 2000).attr("height", 2000)

أكثر...