title: Getting error in loading json from static file?
body: <p>I have D3 api for showing link analysis i.e some datas  are interconnected with one another.</p>
  
  <p>In my api i can manage that,it is showing the relationship when i write them in hard coded in the jsp file when i write the api.</p>
  
  <p>But Now i have to load the data from an External json file using <code>d3.json("Link.json",error,data)</code> but when i do that the page does show me anythihg.</p>
  
  <p>Here is my code i am posting what i have done and what i am trying to do...</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
       pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
      &lt;style&gt;
  
          /* CSS Document */
          .link10 {
              stroke: #000;
              stroke-width: 2px;             
          }
  
          .link1 {
              stroke: #000;
              stroke-width: 2px;
          }
  
          .nodetext {
              pointer-events: none;
          }
  
          .node.type1 {
              fill: #800000;
          }
  
          .node.type4 {
              fill: #000000;
              stroke: #1695A3;
              stroke-width: 3px;
          }
  
          .node.type5 {
              fill: #0000A0;
              size: 20px;
          }
  
          .node.type7 {
              fill: #008000;
              size: 40px;
          }
  
          image.circle {
              cursor: pointer;
          }
  
          .fadein {
              display: none;
              font-size: 20px;
          }
  
          .rectD {
              background-color: #000000;
              width: 70px;
              height: 30px
          }
  
          .rectL {
              background-color: #000000;
              width: 90px;
              height: 30px
          }
      &lt;/style&gt;
      &lt;script src="http://d3js.org/d3.v2.js?2.9.1"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script&gt;
          var data = {
              "nodes" : [ {
                      "name" : "JEET",
                      "full_name" : "Yahoo",
                      "type" : 4,
                      "slug" : "www.yahoo.com",
                      "entity" : "company",
                      "img_hrefD" : "",
                      "img_hrefL" : ""
                  }, {
                      "name" : "SATISH",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  }, {
                      "name" : "RAHUL",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  }, {
                      "name": "DANIEL",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  },
  
                  {
                      "name" : "Offnet",
                      "full_name":"Yandex",
                      "type":5,
                      "slug":"www.yandex.com",
                      "entity":"company",
                      "img_hrefD":"",
                      "img_hrefL":""
  
                  }, {
                      "name" : "Onnet",
                      "full_name":"Yandex",
                      "type":7,
                      "slug":"www.yandex.com",
                      "entity":"company",
                      "img_hrefD":"",
                      "img_hrefL":""
                  }, {
                      "name" : "Desc4",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  },
  
                  {
                      "name" : "SHYAM",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  }, {
                      "name" : "PETER",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  }, {
                      "name" : "ALEX",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  }, {
                      "name" : "MURFY",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  }, {
                      "name" : "JENIFER",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  },{
                      "name" : "Subho",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  },{
                      "name" : "abc",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  },
                  {
                      "name" : "jfyh",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  },
                  {
                      "name" : "flid",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  },
                  {
                      "name" : "gerard",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  },
                  {
                      "name" : "hfud",
                      "type" : 1,
                      "slug" : "",
                      "entity" : "description"
                  }
              ],
  
              "links" : [ {
                      "source" : 0,
                      "target" : 4,
                      "value" : 1,
                      "distance" : 5
                  }, {
                      "source" : 0,
                      "target" : 5,
                      "value" : 1,
                      "distance" : 5
                  }, {
                      "source" : 4,
                      "target" : 6,
                      "value" : 1,
                      "distance" : 5
                  },
  
                  {
                      "source" : 5,
                      "target" : 7,
                      "value" : 1,
                      "distance" : 5
                  }, {
                      "source" : 4,
                      "target" : 2,
                      "value" : 1,
                      "distance" : 5
                  }, {
                      "source" : 4,
                      "target" : 3,
                      "value" : 1,
                      "distance" : 5
                  },
  
                  {
                      "source" : 5,
                      "target" : 8,
                      "value" : 10,
                      "distance" : 6
                  }, {
                      "source" : 5,
                      "target" : 9,
                      "value" : 10,
                      "distance" : 6
                  }, {
                      "source" : 5,
                      "target" : 10,
                      "value" : 10,
                      "distance" : 6
                  }, {
                      "source" : 5,
                      "target" : 11,
                      "value" : 10,
                      "distance" : 6
                  },
  
                  {
                      "source" : 5,
                      "target" : 12,
                      "value" : 10,
                      "distance" : 6
                  }, {
                      "source" : 4,
                      "target" : 1,
                      "value" : 10,
                      "distance" : 6
                  },{
                      "source" : 4,
                      "target" : 13,
                      "value" : 10,
                      "distance" : 6
                  },
                  {
                      "source" : 5,
                      "target" : 14,
                      "value" : 10,
                      "distance" : 6
                  },
                  {
                      "source" : 5,
                      "target" : 15,
                      "value" : 10,
                      "distance" : 6
                  },
                  {
                      "source" : 5,
                      "target" : 16,
                      "value" : 10,
                      "distance" : 6
                  },
                  {
                      "source" : 4,
                      "target" : 17,
                      "value" : 10,
                      "distance" : 6
                  }
              ]
          };
  
          var w = 560, h = 500, radius = d3.scale.log().domain([0,312000 ])
          .range([ "10", "50" ]);
  
          var vis = d3.select("body").append("svg:svg").attr("width", w).attr(
          "height", h);
  
          vis.append("marker")
          .attr("id", "arrowhead")
          .attr("refX", 6 + 2) /*must be smarter way to calculate shift*/
          .attr("refY", 2)
          .attr("markerWidth", 6)
          .attr("markerHeight", 4)
          .attr("orient", "auto")
          .append("path")
          .attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
  
  
  
  
  
  
          //d3.json(data, function(json) {
          var force = self.force = d3.layout.force().nodes(data.nodes).links(
          data.links).linkDistance(function(d) {
              return (d.distance * 10);
          })
          //.friction(0.5)
          .charge(-250).size([ w, h ]).start();
  
          var link = vis.selectAll("line.link").data(data.links).enter().append(
          "svg:line").attr("class", function(d) {
              return "link" + d.value + "";
          }).attr("x1", function(d) {
              return d.source.x;
          }).attr("y1", function(d) {
              return d.source.y;
          }).attr("x2", function(d) {
              return d.target.x;
          }).attr("y2", function(d) {
              return d.target.y;
          }).attr("marker-end", function(d) {
              if (d.value == 10 || d.value==1) {
                  return "url(#arrowhead)"
              } else {
                  return " "
              }
              ;
          });
  
          function openLink() {
              return function(d) {
                  var url = "";
                  if (d.slug != "") {
                      url = d.slug
                  } else if(d.type == 2) {
                      url = "clients/" + d.slug
                  } else if(d.type == 3) {
                      url = "agencies/" + d.slug
                  }
                  window.open("//" + url)
              }
          }
  
          var node = vis.selectAll("g.node").data(data.nodes).enter().append(
          "svg:g").attr("class", "node").call(force.drag);
  
          node.append("circle").attr("class", function(d) {
              return "node type" + d.type
          }).attr("r", function(d) {
              if (d.entity == "description") {
                  return 10
              } else {
                  return 18
              }
          })
  
  
          node.append("text").attr("class", function(d) {
              return "nodetext title_" + d.name
          }).attr("dx", 0).attr("dy", ".35em").style("font-size", "10px").attr(
          "text-anchor", "middle").style("fill", "white").text(
          function(d) {
              if (d.entity != "description") {
                  return d.name
              }
          });
  
          node.on("mouseover", function(d) {
              if (d.entity == "description") {
                  d3.select(this).select('text').transition().duration(300).text(
                  function(d) {
                      return d.name;
                  }).style("font-size", "15px")
  
              } else if (d.entity == "employee") {
                  var asdf = d3.select(this);
                  asdf.select('text').remove();
  
                  asdf.append("text").text(function(d) {
                      return d.prefix + ' ' + d.fst_name
                  }).attr("class", "nodetext").attr("dx", 0).attr("dy", ".35em")
                  .style("font-size", "5px")
                  .attr("text-anchor", "middle").style("fill", "white")
                  .transition().duration(300).style("font-size", "12px");
  
                  asdf.append("text").text(function(d) {
                      return d.snd_name
                  }).attr("class", "nodetext").attr("transform",
                  "translate(0, 12)").attr("dx", 0).attr("dy", ".35em")
                  .style("font-size", "5px")
                  .attr("text-anchor", "middle").style("fill", "white")
                  .transition().duration(300).style("font-size", "12px");
              } else {
                  d3.select(this).select('text').transition().duration(300)
                  .style("font-size", "15px")
              }
  
              if (d.entity == "company") {
                  d3.select(this).select('image').attr("width", "90px").attr("x",
                  "-46px").attr("y", "-36.5px").attr("xlink:href",
                  function(d) {
                      return d.img_hrefL
                  });
              }
  
              if (d.entity == "company") {
  
                  d3.select(this).select('circle').transition().duration(300)
                  .attr("r", 28)
  
              } else if (d.entity == "employee") {
                  d3.select(this).select('circle').transition().duration(300)
                  .attr("r", 15)
              }
          });
  
          node.on("mouseout", function(d) {
              if (d.entity == "company") {
                  d3.select(this).select('text').transition().duration(300).text(
                  function(d) {
                      return d.name;
                  }).style("font-size", "10px")
              } else if (d.entity == "employee") {
                  ///////////////////////////
                  // CHANGE
                  ///////////////////////////
  
                  d3.select(this).selectAll('text').remove();
  
                  //d3.select(this).select('text')
                  d3.select(this).append('text').text(function(d) {
                      return d.name;
                  }).style("font-size", "14px").attr("dx", 0).attr("dy", ".35em")
                  .attr("text-anchor", "middle").style("fill", "white")
                  .attr("class", "nodetext").transition().duration(300)
                  .style("font-size", "10px")
  
              } else {
                  d3.select(this).select('text').transition().duration(300)
                  .style("font-size", "10px")
              }
  
              if (d.entity == "company") {
                  d3.select(this).select('image').attr("width", "70px").attr("x",
                  "-36px").attr("y", "-36px").attr("xlink:href",
                  function(d) {
                      return d.img_hrefD
                  });
              }
  
              if (d.entity == "company" || d.entity == "employee") {
  
                  d3.select(this).select('circle').transition().duration(300)
                  .attr("r", 18)
              }
  
          });
  
          node.on("mouseover", fade(.4, "red")).on("mouseout", fade(1));
  
          var linkedByIndex = {};
          data.links.forEach(function(d) {
              linkedByIndex[d.source.index + "," + d.target.index] = 1;
          });
  
          function isConnected(a, b) {
              return linkedByIndex[a.index + "," + b.index]
                  || linkedByIndex[b.index + "," + a.index]
                  || a.index == b.index;
          }
  
          force.on("tick", function() {
              link.attr("x1", function(d) {
                  return d.source.x;
              }).attr("y1", function(d) {
                  return d.source.y;
              }).attr("x2", function(d) {
                  return d.target.x;
              }).attr("y2", function(d) {
                  return d.target.y;
              });
  
              node.attr("transform", function(d) {
                  return "translate(" + d.x + "," + d.y + ")";
              });
          });
  
  
          function getConnected(cn, d, level) {
              node.each(function(o) {
                  if(isConnected(d, o) &amp;&amp; cn.indexOf(o) == -1) {
                      cn.push(o);
                      if(level &gt; 0) getConnected(cn, o, level-1);
                  };
              });
  
              return cn;
          }
  
  
          function fade(opacity,color) {
              return function(d) {
  
                  node.style("stroke-opacity", function(o) {
                      thisOpacity = isConnected(d, o) ? 1 : opacity;
                      this.setAttribute('fill-opacity', thisOpacity);
                      return thisOpacity;
                  });
  
                  link.style("stroke-opacity", function(o) {
                      return o.source === d || o.target === d ? 1 : opacity;
                  })
  
                  .style("stroke", function(o) {
                      return o.source === d || o.target === d ? color : "#000" ;
                  });
              };
  
          }
          //});
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the code that is working ....</p>
  
  <p>Here i have made the json file
  Link.json</p>
  
  <pre><code> {
  
      "nodes" : [ {
          "name" : "JEET",
          "full_name" : "Yahoo",
          "type" : 4,
          "slug" : "www.yahoo.com",
          "entity" : "company",
          "img_hrefD" : "",
          "img_hrefL" : ""
      }, {
          "name" : "SATISH",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      }, {
          "name" : "RAHUL",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      }, {
          "name": "DANIEL",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      },
  
      {
          "name" : "Offnet",
          "full_name":"Yandex",
          "type":5,
          "slug":"www.yandex.com",
          "entity":"company",
          "img_hrefD":"",
          "img_hrefL":""
  
      }, {
          "name" : "Onnet",
          "full_name":"Yandex",
          "type":7,
          "slug":"www.yandex.com",
          "entity":"company",
          "img_hrefD":"",
          "img_hrefL":""
      }, {
          "name" : "Desc4",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      },
  
      {
          "name" : "SHYAM",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      }, {
          "name" : "PETER",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      }, {
          "name" : "ALEX",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      }, {
          "name" : "MURFY",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      }, {
          "name" : "JENIFER",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      },{
          "name" : "Subho",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      },{
          "name" : "abc",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      },
      {
          "name" : "jfyh",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      },
      {
          "name" : "flid",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      },
      {
          "name" : "gerard",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      },
      {
          "name" : "hfud",
          "type" : 1,
          "slug" : "",
          "entity" : "description"
      }
      ],
  
      "links" : [ {
          "source" : 0,
          "target" : 4,
          "value" : 1,
          "distance" : 5
      }, {
          "source" : 0,
          "target" : 5,
          "value" : 1,
          "distance" : 5
      }, {
          "source" : 4,
          "target" : 6,
          "value" : 1,
          "distance" : 5
      },
  
      {
          "source" : 5,
          "target" : 7,
          "value" : 1,
          "distance" : 5
      }, {
          "source" : 4,
          "target" : 2,
          "value" : 1,
          "distance" : 5
      }, {
          "source" : 4,
          "target" : 3,
          "value" : 1,
          "distance" : 5
      },
  
      {
          "source" : 5,
          "target" : 8,
          "value" : 10,
          "distance" : 6
      }, {
          "source" : 5,
          "target" : 9,
          "value" : 10,
          "distance" : 6
      }, {
          "source" : 5,
          "target" : 10,
          "value" : 10,
          "distance" : 6
      }, {
          "source" : 5,
          "target" : 11,
          "value" : 10,
          "distance" : 6
      },
  
      {
          "source" : 5,
          "target" : 12,
          "value" : 10,
          "distance" : 6
      }, {
          "source" : 4,
          "target" : 1,
          "value" : 10,
          "distance" : 6
      },{
          "source" : 4,
          "target" : 13,
          "value" : 10,
          "distance" : 6
      },
      {
          "source" : 5,
          "target" : 14,
          "value" : 10,
          "distance" : 6
      },
      {
          "source" : 5,
          "target" : 15,
          "value" : 10,
          "distance" : 6
      },
      {
          "source" : 5,
          "target" : 16,
          "value" : 10,
          "distance" : 6
      },
      {
          "source" : 4,
          "target" : 17,
          "value" : 10,
          "distance" :6
      }
      ]
  
  }
  </code></pre>
  
  <p>Here what i have changed in the api  to load from Link.json</p>
  
  <pre><code>  d3.json("Link.json", function(error,data) {
          var force = self.force = d3.layout.force().nodes(data.nodes).links(
          data.links).linkDistance(function(d) {
              return (d.distance * 10);
          })
          //.friction(0.5)
          .charge(-250).size([ w, h ]).start();
  </code></pre>
  
  <p>this is what i have done please help me to do this.. and also i am getting the error
  Uncaught TypeError: Cannot read property 'nodes' of undefined ..please somebody help</p>