從靜態文件加載json時出錯？

我有D3 API顯示鏈接分析，即一些數據互相連接。從靜態文件加載json時出錯？

在我的api中，我可以管理它，它顯示了我在寫api時在jsp文件中以硬編碼方式編寫它們時的關係。

但現在我必須使用d3.json("Link.json",error,data)加載外部json文件中的數據，但是當我這樣做時，頁面確實顯示出anythihg。

這裏是我的代碼我張貼我做了什麼和什麼，我試圖做...

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <style> 

     /* 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 
     } 
    </style> 
    <script src="http://d3js.org/d3.v2.js?2.9.1"></script> 
    <script type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
</head> 
<body> 
    <script> 
     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) && cn.indexOf(o) == -1) { 
        cn.push(o); 
        if(level > 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" ; 
       }); 
      }; 

     } 
     //}); 
    </script> 
</body> 
</html>

這裏是工作的代碼....

在這裏，我有由JSON文件 Link.json

{ 

    "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 
    } 
    ] 

}

這裏是我的API已經更改爲從Link.json

加載

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();

這是我做了，請幫我做這個..還我收到錯誤遺漏的類型錯誤：無法讀取的未定義的屬性「節點」 ..please有人幫助

來源

2013-12-11 lucifer

從the docs：

The parsed JSON is undefined if an error occurs.

我懷疑你是不是與index.html一起舉辦Links.json文件。

另外，我認爲你在JSON中有一個額外的包裝data這將成爲一個問題，一旦瀏覽器可以獲取Link.json文件。

來源

2013-12-11 08:05:23

好的我正在切割json的數據部分並回傳看看它是否正確 – lucifer

但這也不起作用 – lucifer

@lucifer是否可以從瀏覽器訪問'Link.json'文件？ –

從靜態文件加載json時出錯？

回答

相關問題