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

我看到了几个问题。首先，看起来您反复绑定相同的数据，然后过滤（并进行更改）仅与您的下拉列表匹配的数据。既然它一次又一次是相同的数据，什么都不会退出。您可能应该在绑定之前过滤数据。

其次，您没有提供key function，默认情况下，d3将使用index来计算进入/退出。你的关键应该是每个节点的独特之处。根据您的数据，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( ... ;

这里的第二个选项是按照您的方式进行过滤，而是隐藏那些与过滤器不匹配的选项。使用此方法，您可以将所有圆圈添加到前面，将它们全部隐藏，然后过滤圆圈并使匹配的圆圈可见。

D3.JS如何删除/更新

1 个答案: