Javascript d3使用ajax返回的数据重新绘制有向力图

Javascript d3使用ajax返回的数据重新绘制有向力图,javascript,d3.js,Javascript,D3.js,我使用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",

我使用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)});
    $("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)});
    });
上面的代码在页面首次加载时运行。然后,使用ajax生成新数据,如下所示:

    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)});
    $("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,然后用新数据重新绘制它。但是浏览器没有刷新以显示新的图表

演示正在进行中