D3：附加到

Question

在下面的代碼首先創建3個矩形（類「bar_start」）意想不到的父節點+爲各含有另一個矩形（類「rect_b」）一個<克>元素的DOM元素。更新後（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

這只是我沒有區分2個「rect」組。在將它們放入單獨的具有不同ID的< g>元素並在明確引用其父節點的情況下運行後，所有工作都正常。