Question

用D3.js的力导向图可视化社交网络。首先，我用json文件绘制图形。然后，使用ajax生成新的json数据。我想用新的json数据重绘图形。我这样做：

    var github = d3.select("#github").append("svg").attr("width", width).attr("height", height);
    var twitter = d3.select("#twitter").append("svg").attr("width", width).attr("height", height);

    function draw(error, graph, svg, ico){//...}

    d3.json("/static/data/github.json", function(error, graph){draw(error, graph, github, github_ico)});
    d3.json("/static/data/twitter.json", function(error, graph){draw(error, graph, twitter, twitter_ico)});

上面的代码在页面首次加载时运行。然后，使用ajax生成新数据，如下所示：

    $("button").click(function(events){

        events.preventDefault();

        $.post("/uir", $("form").serialize(), 

            function(data, status){

                d3.selectAll("svg").remove();

                var github = d3.select("#github").append("svg").attr("width", width).attr("height", height);
                var twitter = d3.select("#twitter").append("svg").attr("width", width).attr("height", height);

                d3.json("/static/data/github.json", function(error, graph){draw(error, graph, github, github_ico)});
                d3.json("/static/data/twitter.json", function(error, graph){draw(error, graph, twitter, twitter_ico)});
    });

}）;

我使用的方法是从dom中删除svg，然后用新数据重绘它。但浏览器没有刷新以显示新图表。

演示在http://blog.stamaimer.com:5000

d3重绘强制有向图与ajax返回的数据

0 个答案: