单击ajax时更新现有的D3图

Question

点击更新D3图我试图在用户单击按钮时更新我的图形，而不是每次都创建一个新的图形。目前，我有一个ajax函数来从数据库中获取数据。例如：

 $("#things").click(function(){
     $.ajax({
        type: "GET",
        url: some url,
        success: function(data) {
            graph(data);
        }
    })
});

如果用户单击#things上的另一个元素，我希望更改反映在现有的图形上。这是我的图形函数

svg.selectAll(".dot")
    .data(data)
    .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", function(d) {return x(d.x);})
    .attr("cy", function(d) {return y(d.y);})
    .exit().remove()

Answer 1

这家伙解释得很好：http://bl.ocks.org/d3noob/7030f35b72de721622b8

尝试将图形及其数据保存到可用于更新的对象中。

使图形函数返回一个具有更新所需的所有属性的对象。

创建一些函数：

// creates a graph from scratch
//@param {array} graph_data
//@return {object} graph 
function graph(graph_data, graph_object){}
// updates the data in a graph and then re-renders it
//@param {array} grap_data
//@param {object} graph_object
function updateGraph (graph_data, graph_object){}

Answer 2

经过一些研究，我可以从d3中删除svg元素来清除图。

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

或

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