здание d3 силы ориентированного графа с использованием динамических данных JSON

Question

моего текущий D3 со статическим JSON выглядит

var graph = { 
    "nodes":[ 
    {"name":"User Login","group":1}, 
    {"name":"Appointments","group":1}, 
    {"name":"Store Visit","group":1}, 
    {"name":"Visit History","group":1}, 
    {"name":"Resume Store Visit","group":1} 
    ], 
    "links":[ 
    {"source":1,"target":0,"value":1}, 
    {"source":2,"target":0,"value":8}, 
    {"source":3,"target":0,"value":10}, 
    {"source":3,"target":2,"value":6}, 
    {"source":4,"target":0,"value":1} 
    ] 
}; 

var width = 960, 
     height = 500; 

    var color = d3.scale.category20(); 

    var force = d3.layout.force() 
     .charge(-120) 
     .linkDistance(300) 
     .size([width, height]); 

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

    force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

svg.append("svg:defs").selectAll("marker") 
    .data(["end"])  // Different link/path types can be defined here 
    .enter().append("svg:marker") // This section adds in the arrows 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 

    var link = svg.selectAll(".link") 
     .data(graph.links) 
     .enter().append("line") 
     .attr("class", "link") 
     .attr("marker-end", "url(#end)") 
     .style("stroke-width", function(d) { 
      return Math.sqrt(d.value); 
     }); 

    var node = svg.selectAll(".node") 
     .data(graph.nodes) 
     .enter() 
     .append("g") 
     .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; 
     }) 
     .call(force.drag); 

    node.append("rect") 
     .attr("class", "node") 
     .attr("width", 100) 
     .attr("height", 35) 
     .style("fill", function(d) { 
      return color(d.group); 
     }) 
     .style("stroke", "black") 
     .style("stroke-width", "1px"); 

    node.append("text") 
     .text(function(d) { 
      return d.name + '(' + d.group + ')'; 
     }) 
     .style("font-size", "12px") 
     .attr("dy", "1em"); 

    node.append("title") 
     .text(function(d) { 
      return d.name; 
     }); 

    force.on("tick", function() { 
     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> 

Я хочу, чтобы переместить статические данные переместить в файл JS и принести его с помощью моей службы остального, как я делать для других графиков Морриса, где сценарий выглядит

$.ajax({ url: 'http://127.0.0.1:7101/MUDRESTService/rest/v1/meventsbydaybar?onlyData=true&limit=99',
    
      type: 'get', 
      dataType: 'json',  
      success: function(output) { 
       var ddata = JSON.stringify(output.items); 
       var arr = JSON.parse(ddata); 
       bar.setData(arr); 
      }
  
      }); 

Пожалуйста, посоветуйте, как использовать мои выше услуги отдыха в качестве источника для d3 графа

Answer 1

с использованием

var data; // a global 

d3.json("http://127.0.0.1:7101/MUDRESTService/rest/v1/mudstats?onlyData=true", function(error, json) { 
    data = json; 

}); 

работал для меня