json 文件未加载 frim Visual Studio 2013答案

【问题标题】：json file not loading frim Visual Studio 2013json 文件未加载 frim Visual Studio 2013
【发布时间】：2015-07-23 01:41:37
【问题描述】：

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

"http://localhost:58771/HtmlPage1.html 中第 25 行第 13 列未处理的异常

0x800a138f - Microsoft JScript 运行时错误：无法获取属性“链接”的值：对象为空或未定义”

如果我将 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 应用程序的一部分，因此我不能为网站使用不同的格式。

感谢您对此的任何帮助。

【问题讨论】：

检查 error 和您的网络标签。
项目 web.config 文件中有 json mime 吗？

标签： javascript asp.net json d3.js

【解决方案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，您可以像这样获取 url：

'我建议你将 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 Webforms，只需将 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 目录。我总是使用~ 删除所有路径并从顶部开始。

希望这会有所帮助。

【讨论】：

谢谢萨满的详细解释，但是情况还没有解决。 HTML 仍然无法在 IE 中运行，但在 Firefox 或 Chrome 中我收到 404 错误。在对 web.config 进行了建议的更改后，问题的一个新转折是我无法在项目中打开直接的 aspx 页面。我收到了相同的 404 错误消息。
对于第一部分我必须告诉你，d3js 使用 HTML 5，所以你应该使用 IE V9 或更高版本，你不能使用 IE 8 或之前，第二部分这是一个错误，因为您没有在 asp.net 中注册IIS，this 链接可以帮助您解决问题
感谢您提供有关 IE 版本问题的信息。我使用的是 IE 版本 9
用你完整的项目代码更新你的问题，很难找到问题。

【解决方案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 之外运行。

【讨论】：