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

Answer 2

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

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

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

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

我希望它有所帮助。

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

如何删除d3饼图

4 个答案: