Question

我有一个D3应用程序，我有一个显示节点之间关系的结构。为了我的目的，我需要这个应用程序。但问题是应用程序在其html页面中使用硬编码json结构，这不符合我的目的。我需要从.json文件外部加载json。在这里，我试图从该硬编码部分制作json，并尝试编写一些代码，将从外部加载json，但它不起作用。这是我的代码..

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

我已经制作了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"
        } ]
     }

我用这个

修改了我的代码

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];
  });

但屏幕上什么都没有。有人会帮助我吗???

Answer 1

  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
                                    });
                        });

试试这个对我有用.....

Answer 2

根据您的第一个代码和JSON，XHR调用必须是

var links = [];

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

// rest of the code here

});

如何从外部将json加载到D3应用程序

2 个答案: