D3.JS как удалить/обновить

Question

Я читаю данные из следующего файла csv и фильтрую данные, которые хочу показать с помощью фильтра с помощью опции/опции.

opiskelija_id,ryhma_id,opintojakso,laajuus,arvio,arviointipvm 
297,1,Asiakkuuksien rakentaminen,5,S,19971216 
168,2,Asiakkuuksien rakentaminen,5,S,19981213 
167,2,Asiakkuuksien rakentaminen,10,S,19980611 
166,2,Asiakkuuksien rakentaminen,15,S,19980603 
165,2,Asiakkuuksien rakentaminen,10,S,19981213 
164,2,Asiakkuuksien rakentaminen,5,S,19960530 
163,2,Asiakkuuksien rakentaminen,5,S,19971215 
162,2,Asiakkuuksien rakentaminen,10,S,19970602 
161,2,Asiakkuuksien rakentaminen,5,S,19981213 
160,2,Asiakkuuksien rakentaminen,5,S,19981213 
2,1,Asiakkuuksien rakentaminen,5,S,19981213 
1,1,Asiakkuuksien rakentaminen,5,S,19971217 
151,3,Asiakkuus,10,S,19950911 
150,3,Asiakkuus,10,0,19970828 
149,3,Asiakkuus,10,4,19960614 
148,3,Asiakkuus,10,4,19960514 

У меня есть все работающее, как предполагалось, но удаление элементов дает мне проблемы. Когда я выбираю новую категорию, появляются новые элементы, но старые элементы не останутся даже после того, как я слежу за всем в других учебниках и решениях. Он обновляется, но не избавится от старого материала. Вот следующий код (и demo) У меня проблемы. Что мне не хватает/не так? Помогите.

function update(){ 

var change = document.getElementById('test').value; 


     //Data 
     var circles = svg.selectAll("circle") 
      .data(data);     


     //Enter 
     circles.enter().append("circle") 
          .attr("r", 0) 
          .attr("cx", function(d) { return xScale(d.arviointipvm); }) 
          .attr("cy", function(d, i){return i*15});   


     //Update  
     circles.filter(function(d) { return d.opintojakso == change}) 
      .attr("fill", function(d){return colorScale(d.arvio)}) 
      .on("mouseover", function(d){return tooltip.style("visibility", "visible") 
                .style("top",(d3.event.pageY-10)+"px") 
                .style("left",(d3.event.pageX+10)+"px") 
                .html("Opintojakso: " + d.opintojakso 
                +"<br />Arviointipvm: "+d.arviointipvm.getDate()+"."+(d.arviointipvm.getMonth()+1)+"."+d.arviointipvm.getFullYear() 
       +"<br /> Arvio: "+d.arvio+"<br /> Opiskelija_Id: "+d.opiskelija_id)}) 
      .on("mouseout", function(){return tooltip.style("visibility", "hidden");}) 
      .transition() 
      .attr("r", 8); 

     //Exit   
     circles.exit().remove(); 
} 

update(); 

Answer 1

Я вижу пару вопросов. Во-первых, похоже, что вы снова и снова привязываете одни и те же данные, а затем фильтруете (и вносите изменения) только те, которые соответствуют вашему раскрывающемуся списку. Sinces это одни и те же данные снова и снова, ничто никогда не выйдет. Вероятно, вы должны фильтровать данные перед привязкой.

Во-вторых, вы не поставляете key function и по умолчанию d3 будет использовать индекс для вычисления ввода/выхода. Ваш ключ должен быть чем-то уникальным для каждого узла. С вашими данными, это выглядит как opiskelija_id подходит этот счет:

var f_data = data.filter(function(d){ 
    return (d.opintojakso === change); 
}); 

var circles = svg.selectAll("circle") 
    .data(f_data, function(d){ 
    return d.opiskelija_id; 
    }); 

circles.exit().remove(); 

circles.enter().append(... ; 

Второй вариант здесь будет фильтровать, как вы делаете, но вместо того, чтобы скрыть те, которые не соответствуют фильтру. С помощью этого метода вы должны добавить все круги вперед, скрыть их все, затем отфильтровать круги и сделать соответствующие им видимыми.