Javascript 如何从外部将json加载到D3应用程序_Javascript_Json_D3.js

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

javascript json d3.js

Javascript 如何从外部将json加载到D3应用程序,javascript,json,d3.js,Javascript,Json,D3.js,我有一个D3应用程序，其中有一个显示节点之间关系的结构。我需要的正是这份申请。但问题是应用程序在其html页面中使用了类似json的硬代码结构，这不符合我的目的。我需要从.json文件外部加载json。在这里，我尝试从硬代码部分生成json，还尝试编写一些代码从外部加载json，但它不起作用 <!DOCTYPE html> <meta charset="utf-8"> <style> .link { fill: none; stroke: #666; stro

我有一个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>

我用这个修改了我的代码

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

但是屏幕上没有显示任何内容。有人能帮我吗？

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

var links = [];

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

// rest of the code here

});

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

有人能帮我吗？你能告诉我你在控制台中遇到的错误吗？@sam[13:04:19.901]TypeError:links.nodes未定义@sam你有什么吗sam？？？我已经更新了这里的代码，但不工作了。你能看到吗？[12:26:08.211]TypeError:links.forEach（…）未定义这是我正在获取的错误。请输入一个console.log（error，json，links）以查看发生了什么。您的方法不适合使用D3js尝试使用d3.selectAll（）、d3.json（）和selection.data（）。稍后我将尝试使用此命令创建bl.oks。我正在使用我编辑的代码以及在控制台中遇到的错误。请看，我正在获取链接。节点未定义

var links = [];

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

// rest of the code here

});

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