Question

我当前使用静态json的D3看起来像

  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文件并使用我的休息服务获取它，就像我正在为脚本看起来像的其他morris图表做的那样

 $.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;

});

为我工作

使用动态json数据构建d3强制有向图

1 个答案: