如何删除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];
    })

- jahanzaib kk

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

- ilivewithian

---

正如我之前告诉你的，我需要重新绘制。但是当我应用这个函数d3.select("#mypiechart").remove();时，它实际上会删除那个div，因此我无法再次重绘。请建议一些可以用于重绘的方法。 - jahanzaib kk

Answer 2

我已经自己解决了，不过还是感谢@ilivewithian。解决方案如下：

  var vis = angular.element('svg');
    //   var vis = d3.select(".chart-holder").selectAll("svg");
    vis.remove();

Remove是JavaScript的默认函数，用于删除任何元素。 因此，我从绑定饼图的div中获取svg元素。然后删除了svg元素。
然后，我使用与第一次绘制饼图相同的技术重新绘制它。

- jahanzaib kk

Answer 3

只要d3数据的退出方法像更新一样按照文档http://bl.ocks.org/mbostock/3808218的说明工作，你首先需要将数据分配给路径，然后删除它以进行更新。

var path = svg.selectAll('path')
.data(pie(data));

path.enter()
.append('path')
.attr('d', arc)
.attr('class', '.path')
.attr('id', function(d) {
    return d.data.key;
})
.attr('fill', function(d, i) {
    return d.data.color;
})

// exit
path.exit().remove();

希望它有所帮助。

- Momen Zakaria

Answer 4

你应该能够简单地为你的数据变量设置一个新值，图表就可以从中更新。

function setData(){
  data = [{"label": "new", "value": 50},
         {"label": "old", "value": 50}]

  myChart.update();
  };

从GitHub Repo中提取： https://github.com/novus/nvd3/wiki/Sample-chart-%28your-first-nvd3-chart!%29

- Glen Despaux Jr

---

请问您能否稍微详细解释一下这个问题？ - jahanzaib kk

这并不有帮助，我无法理解。 - jahanzaib kk

这些信息直接来自于他们的文档，如果你愿意，可以删除图表并重新绘制它，但最好是简单地更新数据，然后调用update()函数，以便它能够实现新添加的数据。你可以在提供的链接中查看更多代码。 - Glen Despaux Jr