score:0

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.

score: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:

  1. 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>

  2. 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.


Related Query

More Query from same tag