d3 清除原先画在g标签中元素，然后重画新元素？

Question

d3 清除原先画在g标签中元素，然后重画新元素？ 。。。

Answer 1

d3画图代码放在render()里，检测到数据变化后，重新调用一下render，在render中使用remove()清除全部d3元素就ok了

var render = funcation (){
    var svg //你的chart
    svg.selectAll(*).remove()//直接jquery的remove()就行

   //开始绘图d3 code
}

贴个例子：
-----我用了angularJS，稍微有点不同，如果对angular不熟，直接忽视变量中的scope------

#angularJS中的$watch帮助我检测data的变化，如果data有变化，调用render(重新绘图)
scope.$watch('data', function(newData) {
    return scope.render(newData);
}, true);



#这里是把d3绘图代码放在render函数中
scope.render= function(data) {
    if (!data) return;

    var color = d3.scale.category20();

    var force = d3.layout.force()
    .charge(-200)
    .linkDitance(50)
    .size([width, height]);


    svg.selectAll(*).remove()//这里就是用来清空原先绘图的元素的

    //下面都是最普通的d3代码，跟官网上的例子差不多
force
    .nodes(data.nodes)
    .links(data.links)
    .start();


var link = svg.selectAll(".link")
    .data(data.links)
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
    .data(data.nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", function(d) {return Math.sqrt(d.number*2); })
    .style("fill", function(d) { return color(d.group); })
    .call(force.drag);

    //..........................
    //..........................

}