CODEWITHSUNDEEP
javascriptjsond3.js
Subho
Subho

Reputation: 923

How to load a json from externally to a D3 application

I have a D3 application where I have a structure that shows a relationship between nodes. I need exactly this application for my purpose. But the problem is that the application is using a hardcode json like structure in its html page, which does not fit my purpose.I need to load the json externally from a .json file. Here i have tried to make the json from that hardcodes portion, and also tried to write some code that will load the json externally but it is not working .here is my code..

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}

#licensing {
fill: green;
}

.link.licensing {
stroke: green;
 }

.link.resolved {
stroke-dasharray: 0, 2 1;
 }

 circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}

text {
font: 10px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
 }
 </style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    // http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of-the-day/

    /*Here licensing type is making the green arrow
     *Here resolved type is making the solid arrow
     *Here suit type is making the dotted arrow
     *
     *
     **/

     var links = [];

     d3.json("directed.json", function(error, json) {

         links = json.links.forEach(function(d){
         d.source=json.nodes[d.source];
         t.target=json.nodes[d.target];



               });


     });
    var nodes = {};

    // Compute the distinct nodes from the links.
    links.forEach(function(link) {
        link.source = nodes[link.source] || (nodes[link.source] = {
            name : link.source
        });
        link.target = nodes[link.target] || (nodes[link.target] = {
            name : link.target
        });
    });

    var width = 960, height = 500;

    var force = d3.layout.force().nodes(d3.values(nodes)).links(links)
            .size([ width, height ]).linkDistance(60).charge(-300).on(
                    "tick", tick).start();

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

    // Per-type markers, as they don't inherit styles.
    svg.append("defs").selectAll("marker").data(
            [ "suit", "licensing", "resolved" ]).enter().append("marker")
            .attr("id", function(d) {
                return d;
            }).attr("viewBox", "0 -5 10 10").attr("refX", 15).attr("refY",
                    -1.5).attr("markerWidth", 6).attr("markerHeight", 6)
            .attr("orient", "auto").append("path").attr("d",
                    "M0,-5L10,0L0,5");

    var path = svg.append("g").selectAll("path").data(force.links())
            .enter().append("path").attr("class", function(d) {
                return "link " + d.type;
            }).attr("marker-end", function(d) {
                return "url(#" + d.type + ")";
            });

    var circle = svg.append("g").selectAll("circle").data(force.nodes())
            .enter().append("circle").attr("r", 6).call(force.drag);

    var text = svg.append("g").selectAll("text").data(force.nodes())
            .enter().append("text").attr("x", 8).attr("y", ".31em").text(
                    function(d) {
                        return d.name;
                    });

    //selection is happening 
    var selected = circle.filter(function(d) {
        return d.name;
    });

    selected.each(function(d) {
        // d contains the data for the node and this is the circle element

        console.log(d.name);
    });

    var circle = svg.append("g").selectAll("circle").data(force.nodes())
            .enter().append("circle").attr("r", 6).on("click", clickfn)
            .call(force.drag);

    var clickfn = function(node) {
        alert(node);
    }

    // Use elliptical arc path segments to doubly-encode directionality.
    function tick() {
        path.attr("d", linkArc);
        circle.attr("transform", transform);
        text.attr("transform", transform);
    }

    function linkArc(d) {
        var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math
                .sqrt(dx * dx + dy * dy);
        return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr
                + " 0 0,1 " + d.target.x + "," + d.target.y;
    }

    function transform(d) {
        return "translate(" + d.x + "," + d.y + ")";
    }
</script>

i have made the json

       {
            "links" : [ {
            "source" : "Microsoft",
            "target" : "Amazon",
            "type" : "licensing"
        }, {
            "source" : "Microsoft",
            "target" : "HTC",
            "type"   : "licensing"
        }, {
            "source" : "Samsung",
            "target" : "Apple",
            "type"  : "suit"
        }, {
            "source" : "Motorola",
            "target" : "Apple",
            "type"   :  "suit"
        }, {
            "source": "Nokia",
            "target": "Apple",
            "type"  : "resolved"
        }, {
            "source": "HTC",
            "target": "Apple",
            "type"  : "suit"
        }, {
            "source" : "Kodak",
            "target" : "Apple",
            "type" : "suit"
        }, {
            "source": "Microsoft",
            "target": "Barnes & Noble",
            "type" :"suit"
        }, {
            "source": "Microsoft",
            "target": "Foxconn",
            "type" :"suit"
        }, {
            "source": "Apple",
            "target": "HTC",
            "type" :"suit"
        }, {
            "source" : "Microsoft",
            "target" : "Inventec",
            "type" : "suit"
        }, {
            "source" : "Samsung",
            "target" : "Kodak",
            "type" : "resolved"
        }, {
            "source" : "LG",
            "target" : "Kodak",
            "type" : "resolved"
        }, {
            "source": "RIM",
            "target": "Kodak",
            "type" :"suit"
        }, {
            "source" : "Sony",
            "target" : "LG",
            "type" : "suit"
        }, {
            "source" : "Kodak",
            "target" : "LG",
            "type" : "resolved"
        }, {
            "source" : "Apple",
            "target" : "Nokia",
            "type" : "resolved"
        }, {
            "source": "Qualcomm",
            "target": "Nokia",
            "type" :"resolved"
        }, {
            "source" : "Kodak",
            "target" : "Samsung",
            "type" : "resolved"
        }, {
           "source" : "Apple",
           "target" : "Samsung",
           "type" : "suit"
        }, {
            "source": "Kodak",
            "target": "RIM",
            "type" :"licensing"
        }, {
            "source": "Kodak",
            "target": "Qualcomm",
            "type" :"licensing"
        } ]
     }

and i have modified my code with this 

var nodes = {};
     d3.json("directed.json", function(error, graph) {

        graph.links.forEach(function(d) {
        d.source = graph.nodes[d.source];
        d.target = graph.nodes[d.target];
  });

but nothing is coming to the screen .will anybody help me???

Upvotes: 1

Views: 831

Answers (2)

lucifer
lucifer

Reputation: 2327

  d3.json(
                    "directed.json",
                    function(error, directed) {

                         links=directed.links;


                        links.forEach(function(link) {
                            link.source = nodes[link.source]
                                    || (nodes[link.source] = {
                                        name : link.source
                                    });
                            link.target = nodes[link.target]
                                    || (nodes[link.target] = {
                                        name : link.target
                                    });
                        });

try this this is working for me .....

Upvotes: 2

jkutianski
jkutianski

Reputation: 570

According with your 1st code and the JSON the XHR call must to be

var links = [];

d3.json("directed.json", function(error, json) {
          links = json.links;
}).on("load", function () {

// rest of the code here

});

Upvotes: 0

Related Questions