Как удалить круговую диаграмму d3

Я пытаюсь удалить круговую диаграмму D3. Я создал круговую диаграмму, но то, что я хочу сделать, - это щелчок на кнопке. Я хочу удалить круговую диаграмму и хочу перерисовать новую круговую диаграмму с некоторыми новыми данными. Я не нашел никакой помощи из документации сайта 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]; 
    })

источник

2015-05-20 jahanzaib kk

Если установить идентификатор круговой диаграммы, вы можете использовать его в дальнейшем, чтобы удалить элемент:

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

... 

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

источник

2015-05-20 16:48:41 ilivewithian

как я сказал вам, что мне нужно снова рисовать. Но когда я применяю эту функцию d3.select ("# mypiechart"). Remove(); он фактически удаляет этот div так, таким образом, я не могу повторно перерисовать. Пожалуйста, предложите что-то, что можно использовать для перерисовки. –

-1

Вы должны быть в состоянии просто установить новое значение для переменных данных и диаграмма может обновиться из этого.

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

источник

2015-05-20 16:58:34

, пожалуйста, продумайте это немного. –

Это не полезно, и я не могу это понять. –

Эта информация прямо из их документации, вы можете удалить диаграмму и перерисовать ее, если хотите, но лучше просто обновить данные, а затем вызвать функцию update(), чтобы она могла реализовать новые данные. Вы можете увидеть больше кода по предоставленной ссылке. –

я решил это мой сам, ну все равно спасибо @ilivewithian. soultion является

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

Remove фактически функция Javascript по умолчанию, чтобы удалить какой-либо элемент. Итак, я получаю элемент svg из привязки div i для круговой диаграммы. И удалил элемент svg.
И затем я перерисовываю его, используя тот же метод, который я использовал для рисования круговой диаграммы в первый раз.

источник

2015-05-21 09:26:37

Пока метод выхода данных 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();

Надеюсь, это поможет.

источник

2016-01-07 10:17:23

Как удалить круговую диаграмму d3

ответ

Смежные вопросы