Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Message "d3.js TypeError: n is undefined" (for D3 world map with force layout)

I was trying out the code from this site: http://bl.ocks.org/bycoffe/3230965

enter image description here

I keep having the error that "n is undefined".

Upon further scaling down, i have come to the conclusion that the problem is with these lines:

(function() {
      var width = 800;
      var height = 700;
      var padding = 10;
      var k;
      var node;

      var pixelLoc = d3.geo.mercator();
      pixelLoc.scale(2000);

      svg = d3.select('#map')
              .append('svg:svg')
              .attr('width', width)
              .attr('height', height);

      d3.json('coordinates.json', function(coordinates) {

        var coords = [];
        var xs = [];
        var ys = []
        for (alias in coordinates) {
          coords.push(coordinates[alias]);
          xs.push(coordinates[alias][0]);
          ys.push(coordinates[alias][1]);
        }

        var minX = d3.min(xs);
        var maxX = d3.max(xs);
        var xScale = d3.scale.linear().domain([minX, maxX]).range([-50, -30]);
        var minY = d3.min(ys);
        var maxY = d3.max(ys);
        var yScale = d3.scale.linear().domain([minY, maxY]).range([-20, -10]);

        d3.json('medals.json', function(medals) {

            var pointScale = d3.scale.sqrt().domain([0, 80]).range([0, 75]);

             nodes = []

             for (i=0; i<medals.length; i++){
                node = medals[i];
                node.coordinates = coordinates[node.alias];
                node.cx = xScale(pixelLoc(node.coordinates)[0]);
             }

        })

The issue arises with the last line:

node.cx = xScale(pixelLoc(node.coordinates)[0]);

However, I still have no idea what do they mean by "n is undefined". Anybody able to help?

like image 205
user2972046 Avatar asked Nov 01 '22 11:11

user2972046


1 Answers

If you are using d3.min :

Change the library from d3.min.js to d3.js you will probably find out that the error changes to

TypeError: array is undefined

Which means the functions min and max don't work propperly .

    var minX = d3.min(xs);
//Change this for actual min value and max for actual max value and it should work.
like image 180
E.Serra Avatar answered Nov 08 '22 04:11

E.Serra