json file not loading frim Visual Studio 2013

Question

I am attempting to create a drag-able network diagram using d3.js and have run into an unusual problem. When I attempt to run the page from Visual Studios 2013 I get the following error:

"Unhandled exception at line 25, column 13 in http://localhost:58771/HtmlPage1.html

0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'links': object is null or undefined"

If I move the HTML page and the .json file to my local drive the page opens with no problem.

Here is the d3 code:

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

the json file is rather large so I am not posting it. The question is why it works from my local c: drive but not from the asp project in visual studio. The graph will be part of an ASP.net application so I can not use a different format for the website.

Thanks for any help with this.

Answer 1

The ASP.NET project runs at IIS Web Server and its behavior doesn't like windows directory, so you should set the d3.json() url property just same as json file URL , Actually you are running your project at a virtual server, so you should follow these steps:

Add this code inside web.config file <configuration></configuration> tag to allow IIS to serve the json file as well, without this code IIS thinks the json file is a path of 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>

Get the json file URL and give it to the d3.json() function
If you are using Razor View Engine you can get the url like this:
'I suggest you keep graph.json inside a folder that is named 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]; }); 
```
If you are using ASP.NET Webforms just convert d3.json() to this:
```
  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]; }); 
```
Start from solution explorer and follow the folders to find the graph.json and save it like a windows directory. I'm always using ~ to remove all the path and begin from the top.

Hope this helps.

Answer 2

Here is the entire code for review:

!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>

The firefox console is telling me the json file is empty. That is not correct I have verified the data is there and the page runs outside visual studio.

json file not loading frim Visual Studio 2013

Question

2 answers

solution1
1 2015-07-16 21:47:23

solution2
0 2015-07-22 17:41:37

json file not loading frim Visual Studio 2013

Question

2 answers

solution1 1 2015-07-16 21:47:23

solution2 0 2015-07-22 17:41:37

solution1
1 2015-07-16 21:47:23

solution2
0 2015-07-22 17:41:37