javascript - 如何删除d3饼图

Question

我正在尝试删除 D3 饼图。我已经创建了饼图，但我想做的是点击某个按钮我想删除饼图并想用一些新数据重新绘制新饼图。我没有从 D3 网站的文档中找到任何帮助。我在下面分享绘制饼图的代码。

   var w =300;
   var h =300;
   var r =150;
   data = [{"label": "joy", "value": 20},
        {"label": "fear", "value": 20},
        {"label": "anger", "value": 20},
        {"label": "disgust", "value": 20},
        {"label": "sadness", "value": 20}] 
  var colorArray = ['#f6cf31', '#7e53a3', '#f8522a', '#3cbf55', '#00a7de']
    var vis = d3.select(".chart-holder")
            .append("svg:svg")
            .data([data])
            .attr("width", w)
            .attr("height", h)
            .append("svg:g")
            .attr("transform", "translate(" + r + "," + r + ")")

    var arc = d3.svg.arc()
            .outerRadius(r);

    var pie = d3.layout.pie()
            .value(function(d) {
        return d.value;
    });

    var arcs = vis.selectAll("g.slice")
            .data(pie)
            .enter()
            .append("svg:g")
            .attr("class", "slice");

    arcs.append("svg:path")
            .attr("fill", function(d, i) {
        return colorArray[i];
    })

Answer 1

如果您设置了饼图的 id，您可以稍后使用它来删除元素:

var arcs = vis.selectAll("g.slice")
        .data(pie)
        .enter()
        .append("svg:g")
        .attr("class", "slice")
        .attr("id", "mypiechart");

...

d3.select("#mypiechart").remove();