D3 v4中的组加入数据

Question

I switched to version 4 of D3 and having issues with the new enter, update, exit model. I quite dont get it and I don't know how to use it when creating nested dom elements. Could someone show me, how I should adjust my Code.

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 fixed my Problem now by using merge

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