json文件未加載frim Visual Studio 2013

Question

我正在嘗試使用d3.js創建可拖動的網絡圖，並且遇到了一個異常問題。 當我嘗試從Visual Studios 2013運行頁面時，出現以下錯誤：

“ http：// localhost：58771 / HtmlPage1.html中第25行第13列的未處理異常

0x800a138f-Microsoft JScript運行時錯誤：無法獲取屬性“鏈接”的值：對象為null或未定義”

如果將HTML頁面和.json文件移動到本地驅動器，則該頁面可以正常打開。

這是d3代碼：

     d3.json("graph.json", function (error, graph) {
        graph.links.forEach(function (d) {
            d.source = graph.nodes[d.source];
            d.target = graph.nodes[d.target];
        });

json文件很大，因此我沒有發布它。 問題是為什么它可以在我的本地c：驅動器上運行，而不能在Visual Studio中的asp項目上運行。 該圖將是ASP.net應用程序的一部分，因此我不能對網站使用其他格式。

感謝您對此的任何幫助。

Answer 1

ASP.NET項目在IIS Web Server運行，其行為與windows目錄不同，因此您應將d3.json() url屬性設置為與json文件URL相同，實際上您是在虛擬服務器上運行項目，因此，您應該按照以下步驟操作：

將此代碼添加到web.config文件<configuration></configuration>標記內，以允許IIS可以提供json文件，而無需此代碼IIS認為json文件是URL的路徑。

 <system.webServer> <handlers> <remove name="BlockViewHandler"/> <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" /> </handlers> <staticContent> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> </system.webServer>

獲取json文件的URL ，並將其提供給d3.json()函數
如果您使用的是Razor View Engine，則可以獲取如下網址：
“我建議您將graph.json保留在名為Data的文件夾中”
```
  var url = "@Url.Content("~/Data/graph.json")"; d3.json(url, function (error, graph) { graph.links.forEach(function (d) { d.source = graph.nodes[d.source]; d.target = graph.nodes[d.target]; }); 
```
如果您使用的是ASP.NET d3.json()只需將d3.json()轉換為此：
```
  d3.json("~/Data/graph.json", function (error, graph) { graph.links.forEach(function (d) { d.source = graph.nodes[d.source]; d.target = graph.nodes[d.target]; }); 
```
從解決方案資源管理器開始，然后按照文件夾查找graph.json並將其保存為Windows目錄。 我一直在使用~刪除所有路徑，並從頂部開始。

希望這可以幫助。

Answer 2

這是整個代碼供您查看：

!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://d3js.org/d3.v2.js"></script>
<style>
    .link {
        stroke: #ccc;
    }

    .nodetext {
        pointer-events: none;
        font: 10px sans-serif;
    }
</style>
</head>
<body>
<script type="text/javascript">

    var w = 1280,
        h = 1024;

    var color = d3.scale.category20();

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

    d3.json("graph3-copy.json", function (json) {
        var force = self.force = d3.layout.force()
            .nodes(json.nodes)
            .links(json.links)
            .gravity(.05)
            .distance(100)
            .charge(-100)
            .size([w, h])
            .start();

        var link = vis.selectAll("line.link")
            .data(json.links)
            .enter().append("svg:line")
            .attr("class", "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; });

        var node_drag = d3.behavior.drag()
            .on("dragstart", dragstart)
            .on("drag", dragmove)
            .on("dragend", dragend);

        function dragstart(d, i) {
        force.stop() // stops the force auto positioning before you  start dragging
        }

        function dragmove(d, i) {
            d.px += d3.event.dx;
            d.py += d3.event.dy;
            d.x += d3.event.dx;
            d.y += d3.event.dy;
            tick(); // this is the key to make it work together with updating both px,py,x,y on d !
        }

        function dragend(d, i) {
            d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
            tick();
            force.resume();
        }


        var node = vis.selectAll("g.node")
            .data(json.nodes)
          .enter().append("svg:g")
            .attr("class", "node")
            .call(node_drag);

        node.append("svg:image")
            .attr("class", "circle")
            .attr("xlink:href", "https://github.com/favicon.ico")
            .attr("x", "-8px")
            .attr("y", "-8px")
            .attr("width", "16px")
            .attr("height", "16px");

        node.append("svg:text")
            .attr("class", "nodetext")
            .attr("dx", 12)
            .attr("dy", ".35em")
            .text(function (d) { return d.name });

        force.on("tick", tick);

        function tick() {
            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 + ")"; });
        };


    });

</script>
</body>
</html>

firefox控制台告訴我json文件為空。 這是不正確的，我已經驗證了數據是否存在並且頁面在Visual Studio外部運行。

json文件未加載frim Visual Studio 2013

問題描述

2 個解決方案

解決方案1
1 2015-07-16 21:47:23

解決方案2
0 2015-07-22 17:41:37

json文件未加載frim Visual Studio 2013

問題描述

2 個解決方案

解決方案1 1 2015-07-16 21:47:23

解決方案2 0 2015-07-22 17:41:37

解決方案1
1 2015-07-16 21:47:23

解決方案2
0 2015-07-22 17:41:37