如何删除d3饼图答案

【问题标题】：How to delete a d3 pie chart如何删除d3饼图
【发布时间】：2015-08-02 01:22:29
【问题描述】：

我正在尝试删除 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];
    })

【问题讨论】：

标签： javascript angularjs d3.js

【解决方案1】：

如果你设置了饼图的id，以后可以用它来移除元素：

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

...

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

【讨论】：

我已经告诉过你我需要重新绘制。但是当我应用这个函数时 d3.select("#mypiechart").remove();它实际上删除了那个 div，所以这样我就不能再重绘了。请建议一些可用于重绘的东西。

【解决方案2】：

您应该能够简单地为您的数据变量设置一个新值，并且图表可以由此更新。

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

  myChart.update();
  };

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

【讨论】：

请您详细说明一下。
这没有帮助，我无法理解。
此信息直接来自他们的文档，您可以删除图表并根据需要重新绘制，但最好简单地更新数据，然后调用 update() 函数，这样它就可以实现添加了新数据。您可以在提供的链接中查看更多代码。

【解决方案3】：

我已经自己解决了，无论如何感谢@ilivewithian。灵魂是

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

Remove 实际上是用于删除任何元素的 javascript 默认函数。所以我从我为饼图绑定的 div 中获取 svg 元素。并删除了 svg 元素。
然后我重新绘制它，使用我第一次绘制饼图时使用的相同技术。

【讨论】：

【解决方案4】：

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

希望对你有帮助。

【讨论】：