dson force-directed graphへのjsonデータの読み込みエラー

Question

hereと同様の問題が発生していますが、そこで提供されている解決法はうまくいかないようです。私は、自分のjsonデータを使って力ベースのラベル配置を使って力に基づくグラフを作成しようとしています。私は私のデータを読み込む時点で不特定の捕らえられていないjavascriptエラーに遭遇しています。私のデータは次の形式です：

{"nodes": [{"name": Bob, "id": 1}, {"name": Suzy, "id": 2}], 
"links": [{"source": 1, "target":2}]} 

私のスクリプトは以下の通りです。どんな洞察も非常に役立つだろう！

<script type="text/javascript" charset="utf-8"> 
 
     var w = 960, h = 500; 
 

 
     var labelDistance = 0; 
 

 
     var vis = d3.select("body").append("svg:svg").attr("width", w).attr("height", h); 
 

 
     var nodes = []; 
 
     var labelAnchors = []; 
 
     var labelAnchorLinks = []; 
 
     var links = []; 
 

 
    d3.json("data.json", function(error, graph) { 
 
     if (error) throw error; 
 

 
    
 
    for (var i = 0; i < graph.nodes.length; i++) { 
 
    var node = graph.nodes[i]; 
 
    nodes.push(node); 
 
    labelAnchors.push({ 
 
     node : node 
 
    }); 
 
    labelAnchors.push({ 
 
     node : node 
 
    }); 
 
    } 
 
    
 
    graph.links.forEach(function(link, i) { 
 

 
     links.push({ 
 
     source: link.source, 
 
     target: link.target, 
 
     weight: Math.random() 
 
     }); 
 
     labelAnchorLinks.push({ 
 
     source: link.source * 2, 
 
     target: link.target * 2 + 1, 
 
     weight: 1 
 
     }); 
 
    }); 
 

 
     var force = d3.layout.force().size([w, h]).nodes(nodes).links(links).gravity(1).linkDistance(50).charge(-3000).linkStrength(function(x) { 
 
     return x.weight * 10 
 
     }); 
 

 

 
     force.start(); 
 

 
     var force2 = d3.layout.force().nodes(labelAnchors).links(labelAnchorLinks).gravity(0).linkDistance(0).linkStrength(8).charge(-100).size([w, h]); 
 
     force2.start(); 
 

 
     var link = vis.selectAll("line.link").data(links).enter().append("svg:line").attr("class", "link").style("stroke", "#CCC"); 
 

 
     var node = vis.selectAll("g.node").data(force.nodes()).enter().append("svg:g").attr("class", "node"); 
 
     node.append("svg:circle").attr("r", 5).style("fill", "#555").style("stroke", "#FFF").style("stroke-width", 3); 
 
     node.call(force.drag); 
 

 

 
     var anchorLink = vis.selectAll("line.anchorLink").data(labelAnchorLinks)//.enter().append("svg:line").attr("class", "anchorLink").style("stroke", "#999"); 
 

 
     var anchorNode = vis.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode"); 
 
     anchorNode.append("svg:circle").attr("r", 0).style("fill", "#FFF"); 
 
     anchorNode.append("svg:text").text(function(d, i) { 
 
     return i % 2 == 0 ? "" : d.node.label 
 
     }).style("fill", "#555").style("font-family", "Arial").style("font-size", 12); 
 

 
     var updateLink = function() { 
 
     this.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; 
 
     }); 
 

 
     } 
 

 
     var updateNode = function() { 
 
     this.attr("transform", function(d) { 
 
      return "translate(" + d.x + "," + d.y + ")"; 
 
     }); 
 

 
     } 
 

 

 
     force.on("tick", function() { 
 

 
     force2.start(); 
 

 
     node.call(updateNode); 
 

 
     anchorNode.each(function(d, i) { 
 
      if(i % 2 == 0) { 
 
      d.x = d.node.x; 
 
      d.y = d.node.y; 
 
      } else { 
 
      var b = this.childNodes[1].getBBox(); 
 

 
      var diffX = d.x - d.node.x; 
 
      var diffY = d.y - d.node.y; 
 

 
      var dist = Math.sqrt(diffX * diffX + diffY * diffY); 
 

 
      var shiftX = b.width * (diffX - dist)/(dist * 2); 
 
      shiftX = Math.max(-b.width, Math.min(0, shiftX)); 
 
      var shiftY = 5; 
 
      this.childNodes[1].setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")"); 
 
      } 
 
     }); 
 

 

 
     anchorNode.call(updateNode); 
 

 
     link.call(updateLink); 
 
     anchorLink.call(updateLink); 
 

 
    }); 
 
     }); 
 

 
    </script>

Answer 1

あなたは、あなたのファイルシステムまたは外部リソースへの正しいパスを指定せずにファイルを読み取ることができません。

d3.json("./data.json", function(error, graph) { 

または：：ようなもので

d3.json("/data/", function(error, graph) { 

：あなたはこの行を交換する必要があることを意味し

また

d3.json("http://www.somesite.com/data.json", function(error, graph) { 

、必ず現地を実行している作りますサーバー上に存在しない場合、その呼び出しは失敗します。