D3：dom元素附加到意外的父节点

Question

以下代码最初为每个包含另一个矩形（类“ rect_b”）的<g>元素创建3个矩形（类“ bar_start”）+。 更新后（其他3个数据集值），所有元素的数量从3个增加到6个（精细），但是新的“ bar_start”矩形与<g>节点挂钩并进行相应的转置。

为什么会这样呢？

var colors = [[66,124,153],[154,61,55],[106,125,57],[129,42,77],[204,94,41],[219,170,53]];

            //coordinates
            var w = 500;                            //svg width
            var h = 200;                            //svg height
            var p = 3;                              //svg padding
            var segment_height = h* 0.2;            //height of bars
            var label_height = segment_height/2;    //legend rect height    
            var label_width = (w - 4 * p) / 3;      //legend rect width
            var s = 3;                              //break width between bars

            //dataset
            var dataset1 = [{data: 7, attribute: "Project"}, {data: 14, attribute: "Other"}, {data: 95, attribute: "Other2"}];  

            var dataset2 = [{data: 45, attribute: "Jaja"}, {data: 25, attribute: "Dupa"}, {data: 10, attribute: "Process"}, 
                               {data: 7, attribute: "Project"}, {data: 14, attribute: "Other"}, {data: 14, attribute: "Other"}];

            var dataIndex;

            //create svg
            var svg = d3.select("body")
                .append("svg")
                .attr("width",w)
                .attr("height",h)
                .attr("y", 100)
                .style("border", "1px solid black");

            function update() {

                if (dataIndex==1) {
                    dataIndex = 2
                } else {
                    dataIndex = 1
                }

                //debugger;

                var dataset = [];
                dataset = eval("dataset" + dataIndex);

                //debugger;

                //total length of bars
                var length_of_segments = w - 2 * p - (dataset.length-1) * s;

                //find sum of values
                var sum_of_data = 0;
                for (var i = 0; i < dataset.length; i++) {
                    sum_of_data = sum_of_data + dataset[i].data
                };

                //set scale
                var scale = d3.scale.linear()
                    .domain([0, sum_of_data])
                    .range([0, length_of_segments]);

                var array = new Array();
                array[0] = new Array();
                array[1] = new Array();

                //set width and x for bars
                for (var i = 0; i < dataset.length; i++) {
                    //placeholder for width
                    array[0][i] = scale(dataset[i].data);
                    //placeholder for x
                    if (i==0) {
                        array[1][i] = p
                    } else {
                        array[1][i] = array[1][i-1] + array[0][i-1] + s
                    };
                };

                //bars
                var label_rect = svg.selectAll("rect")
                    .data(dataset);

                    label_rect
                        .exit()
                        .remove();

                    label_rect
                        .enter()
                        .append("rect")
                        .attr("x",0)
                        .attr("width", 0);

                    label_rect
                        .transition()
                        .attr("class", "bar_start")
                        .attr("x", function(d,i) {
                            if (i==0) {
                                return p
                            } else {
                                return s + array[0][i-1] + array [1][i-1]
                            };
                        })
                        .attr("y", p)
                        .attr("width", function(d,i) {
                            return array[0][i];
                        })
                        .attr("height", segment_height)
                        .attr("fill", function(d,i) {
                            return "rgb(" + colors[i][0] + "," + colors[i][1] + "," + colors[i][2] + ")"
                        })

                    //gs for legend
                    var g = svg.selectAll("g")
                        .data(dataset)

                        g
                        .exit()
                        .remove();

                        g
                        .enter()
                        .append("g");

                        g
                        .attr("class", "g_start")
                        .attr("transform", function(d,i) {a=(p + (((i/3)-Math.floor(i/3))*3) * (label_width + p));
                            return "translate(" 
                                    + (p + (((i/3)-Math.floor(i/3))*3) * (label_width + p)) + ","                                                           //count x - position in row
                                    + (2*p + segment_height + (Math.floor(i/3)) * (label_height+p)) + ")";                                                  //count y - number of row
                            })

                        g.append("rect")
                            .attr("class", "rect_b")
                            .attr("width", label_width-1)
                            .attr("height", label_height-1)
                            .attr("rx", label_width*0.02)
                            .attr("ry", label_width*0.02)

            };


            d3.select("p").on("click", function() {
                update();
            });

Answer 1

只是我没有区分两个“直肠”人群。 将它们放在具有不同ID的单独的<g>元素中，并在对其父节点进行显式引用的情况下进行操作，一切正常。