D3.js Сила Layout График пустое пространство с внешними данными

Question

Я хотел бы загрузить JSON для моего графика компоновки с моего сервера Node.JS, я пробую код, который я видел на этом форуме, но он не работает, у меня есть только пустое пространство. Я не знаю, почему это не работает. Это мой код:

function makeDraw(){ 
       var links = []; 
       d3.json("./data.json", function(error, json) { 
        links = json.links; 
       }).on("load", function() { 
       links.forEach(function(link) { 
        link.source = nodes_1[link.source] || (nodes_1[link.source] = {name: link.source, level:link.level, life:link.life}); 
        link.target = nodes_1[link.target] || (nodes_1[link.target] = {name: link.target, level:link.level, life:link.life}); 
       }); 

       var nodes_1 = {}; 


       var width_1 = 960, 
         height_1 = 500; 

       var force_1 = d3.layout.force() 
         .nodes(d3.values(nodes_1)) 
         .links(links) 
         .size([width_1, height_1]) 
         .linkDistance(100) 
         .charge(-400) 
         .on("tick", tick) 
         .start(); 

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

       // Per-type markers, as they don't inherit styles. 
       svg_1.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", 20) 
         .attr("markerHeight", 20) 
         .attr("orient", "auto") 
         .append("path") 
         .attr("d", "M0,-5L10,0L0,5"); 

       var path_1 = svg_1.append("g").selectAll("path") 
         .data(force_1.links()) 
         .enter().append("path") 
         .attr("class", function(d) { return "link " + d.type; }) 
         .style("fill","none").style("stroke","black") 
         .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); 


       var circle_1 = svg_1.append("g").selectAll("circle") 
         .data(force_1.nodes()) 
         .enter().append("circle") 
         .attr("r", 20) 
         .call(force_1.drag) 
         .style("fill","red") 
         .on("click", click); 


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

       // Use elliptical arc path segments to doubly-encode directionality. 
       function tick() { 
        path_1.attr("d", linkArc); 
        circle_1.attr("transform", transform); 
        text_1.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 + ")"; 
       } 
      }); 
      } 

Благодарим за помощь!

Answer 1

Fixed свои синтаксические ошибки, и она работает:

function makeDraw() { 
    var links = []; 
    d3.json("./data.json", function(error, json) { 
    links = json; 

    var nodes_1 = {}; 

    links.forEach(function(link) { 
     link.source = nodes_1[link.source] || (nodes_1[link.source] = { 
     name: link.source, 
     projectId: link.projectId, 
     numberOfLink: link.numberOfLink 
     }); 
     link.target = nodes_1[link.target] || (nodes_1[link.target] = { 
     name: link.target, 
     projectId: link.projectId, 
     numberOfLink: link.numberOfLink 
     }); 
    }); 



    var width_1 = 960, 
     height_1 = 500; 

    var force_1 = d3.layout.force() 
     .nodes(d3.values(nodes_1)) 
     .links(links) 
     .size([width_1, height_1]) 
     .linkDistance(100) 
     .charge(-400) 
     .on("tick", tick) 
     .start(); 

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

    // Per-type markers, as they don't inherit styles. 
    svg_1.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", 20) 
     .attr("markerHeight", 20) 
     .attr("orient", "auto") 
     .append("path") 
     .attr("d", "M0,-5L10,0L0,5"); 

    var path_1 = svg_1.append("g").selectAll("path") 
     .data(force_1.links()) 
     .enter().append("path") 
     .attr("class", function(d) { 
     return "link " + d.type; 
     }) 
     .style("fill", "none").style("stroke", "black") 
     .attr("marker-end", function(d) { 
     return "url(#" + d.type + ")"; 
     }); 


    var circle_1 = svg_1.append("g").selectAll("circle") 
     .data(force_1.nodes()) 
     .enter().append("circle") 
     .attr("r", 20) 
     .call(force_1.drag) 
     .style("fill", "red") 
     .on("click", click); 

    function click(d) { 

    } 

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

    // Use elliptical arc path segments to doubly-encode directionality. 
    function tick() { 
     path_1.attr("d", linkArc); 
     circle_1.attr("transform", transform); 
     text_1.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 + ")"; 
    } 
    }); 
} 

makeDraw(); 

var nodes_1 = {}; должна быть определена перед использованием.

Кроме того, ваш json уже в правильном формате, поэтому нет необходимости links = json.links;, вы не можете напрямую использовать links = json.links;