Gruppe, die Daten in D3 verbindet v4

Question

Ich wechselte zu Version 4 von D3 und Probleme mit der neuen Eingabe, Update, Exit-Modell. Ich verstehe es nicht und ich weiß nicht, wie ich es beim Erstellen von verschachtelten Dom-Elementen verwenden soll. Könnte mir jemand zeigen, wie ich meinen Code anpassen soll.

var c2 = d3.select("#formdfield-node").selectAll(".ND-searchresults") 
    .data([0]); 

c2.enter() 
    .append("div") 
    .attr("class", "ND-searchresults"); 

c2.exit().remove(); 


var c3 = c2.selectAll(".ND-searchresults-list") 
    .data(function(d) { 
     return [d] 
    }); 

c3.enter() 
    .append("ul") 
    .attr("class", "ND-searchresults-list"); 

c3.exit().remove(); 

var bsl = c3.selectAll(".ND-selection-rows") 
    .data(vmh.filter(function(d) { 
     return (d.logicalName.toLowerCase().match(re) || d.networkName.toLowerCase().match(re)); 
    })); 

bsl.enter() 
    .append("li") 
    .attr("class", "ND-selection-rows") 
    .attr("id", "ND-selection-rows") 
    .on("mouseup", function(d) { 

     d3.select("#info-sw-node").property("value", d.logicalName + " - " + d.networkName); 
     _thisNode = d; 
     d3.select(".ND-searchresults").remove(); 

    }); 

bsl.exit().remove(); 



var bsrows = bsl.selectAll(".ND-rows-name") 
    .data(function(d) { 
     return [d]; 
    }); 

bsrows.text(function(d) { 
    return d.logicalName + " - " + d.networkName 
}); 

bsrows.enter() 
    .append("div") 
    .attr("class", "ND-rows-name") 
    .text(function(d) { 
     return d.logicalName + " - " + d.networkName 
    }); 

bsrows.exit().remove(); 

Answer 1

Ok mein Problem nun behoben von

d3.select(".searchbar") 
.on("input", function(d) { 

    if (!this.value == ""){ 

     var vvalue = this.value.toString().toLowerCase(); 
     var re = new RegExp(vvalue); 


     var a = d3.select(".search").selectAll(".BS-searchresults").data([BS]); 

     var a_enter = a.enter() 
     .append("div") 
     .attr("class","BS-searchresults"); 

     var a_update = a.merge(a_enter); 

     a.exit().remove(); 

      var b = a_update.selectAll(".BS-searchresults-list").data(function (d) {return [d]}); 

      var b_enter = b.enter() 
          .append("ul") 
          .attr("class","BS-searchresults-list"); 

      var b_update = b.merge(b_enter); 

      b.exit().remove(); 


       var c = b_update.selectAll(".BS-selection-rows").data(function (d) {return d.filter(function(d) { return (d.logicalName.toLowerCase().match(re) || d.networkName.toLowerCase().match(re))})}); 

       var c_enter = c.enter() 
           .append("li") 
           .attr("class", "BS-selection-rows") 
           .attr("id", "BS-selection-rows"); 

       var c_update = c.merge(c_enter) 
       .attr("title", function(d) {return d.networkName}); 

       c.exit().remove(); 


        var d = c_update.selectAll(".BS-rows-name").data(function (d) {return [d]}); 

        var d_enter = d.enter() 
            .append("div") 
            .attr("class", "BS-rows-name"); 

        var d_update = d.merge(d_enter) 
        .text(function(d) {return d.logicalName+" - "+d.networkName}) 
        .on("mouseup", function(d){ 

           d3.select(".searchbar").property("value", d.logicalName+" - "+d.networkName);     
           d3.select(".BS-searchresults").remove(); 
           loadBS(d); 
        });; 

        d.exit().remove(); 


         //Außerhalb klicken um die Liste auszublenden 

         $(window).click(function() { 
          d3.select(".BS-searchresults").remove(); 
         }); 

         $('#BS-selection-rows').click(function(event){ 
          event.stopPropagation(); 
         }); 

         $('#bs-search').click(function(event){ 
          event.stopPropagation(); 
         }); 

    }else{ 
     d3.select(".BS-searchresults").remove();     
    }      
}); 
}); 

verschmelzen mit