title: Scoping problem when replacing json with local data in d3
body: <p>I am fetching some json data using d3.json and then calling an update function within the <code>.then</code>. When I replace the d3.json with the same declared data structure inline then I get an error 'link.data is not a function' at the line <code>link = link.data(links, function(d) { return d.id; });</code>
  I have tried passing link and node into <code>update()</code> but that doesn't work.</p>
  
  <p>I think it is some sort of scoping problem.</p>
  
  <pre><code>var link = svg.selectAll(".link"),
      node = svg.selectAll(".node");
  
  d3.json("graph2.json").then( function(json) {
    root = json;
    //Give nodes ids and initialize variables
    for(var i=0; i&lt;root.nodes.length; i++) {
      var node = root.nodes[i];
      node.id = i;
      node.collapsing = 0;
      node.collapsed = false;
    }
    //Give links ids and initialize variables
    for(var i=0; i&lt;root.links.length; i++) {
      var link = root.links[i];
      link.source = root.nodes[link.source];
      link.target = root.nodes[link.target];
      link.id = i;
    }
  
    update();
  });
  
  
  function update() {
    //Keep only the visible nodes
    var nodes = root.nodes.filter(function(d) {
      return d.collapsing == 0;
    });
    var links = root.links;
    //Keep only the visible links
    links = root.links.filter(function(d) {
      return d.source.collapsing == 0 &amp;&amp; d.target.collapsing == 0;
    });
  
    force
        .nodes(nodes)
    force
        .force("link")
        .links(links)
  
    // Update the links…
    link = link.data(links, function(d) { return d.id; }); 
    .......
  </code></pre>
  
  <p>The code that fails (with the data structure and d3.json commented out) is below.</p>
  
  <pre><code>json = {
    "nodes": [
      {"x": 469, "y": 410},
      {"x": 493, "y": 364},
      {"x": 442, "y": 365},
      {"x": 467, "y": 314},
    ],
    "links": [
      {"source":  0, "target":  1},
      {"source":  1, "target":  2},
      {"source":  2, "target":  0},
      {"source":  1, "target":  3},
      {"source":  3, "target":  2},
    ]
  }
  
  var link = svg.selectAll(".link"),
      node = svg.selectAll(".node");
  
  //d3.json("graph2.json").then( function(json) {
    root = json;
    //Give nodes ids and initialize variables
    for(var i=0; i&lt;root.nodes.length; i++) {
      var node = root.nodes[i];
      node.id = i;
      node.collapsing = 0;
      node.collapsed = false;
    }
    //Give links ids and initialize variables
    for(var i=0; i&lt;root.links.length; i++) {
      var link = root.links[i];
      link.source = root.nodes[link.source];
      link.target = root.nodes[link.target];
      link.id = i;
    }
  
    update();
  //});
  
  
  function update() {
    //Keep only the visible nodes
    var nodes = root.nodes.filter(function(d) {
      return d.collapsing == 0;
    });
    var links = root.links;
    //Keep only the visible links
    links = root.links.filter(function(d) {
      return d.source.collapsing == 0 &amp;&amp; d.target.collapsing == 0;
    });
  
    force
        .nodes(nodes)
    force
        .force("link")
        .links(links)
  
    // Update the links…
    link = link.data(links, function(d) { return d.id; });
  .....
  </code></pre>