json文件未加载frim Visual Studio 2013_JavaScript

我正在尝试使用d3.js创建可拖动的网络图，并且遇到了一个异常问题。 当我尝试从Visual Studios 2013运行页面时，出现以下错误：

“ 中第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应用程序的一部分，因此我不能对网站使用其他格式。

感谢您对此的任何帮助。

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目录。 我一直在使用~删除所有路径，并从顶部开始。

希望这可以帮助。

这是整个代码供您查看：

!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

问题描述

1楼

2楼