单击 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

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

使您的图形函数 return 成为具有更新所需的所有属性的对象。

创建几个函数：

// 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();

单击 ajax 时更新现有的 D3 图

Update the existing D3 graph when clicking on ajax

javascript

ajax

jquery

updates

d3.js