包佈局未正確綁定到已更新的數據集

Question

我有一個包佈局圖表，顯示Web應用程序的公司和用戶。該圖表具有獨立的數據集，代表不同的時間段。

示例 -

1. 所有用戶
2. 只有用戶的最後一週
3. 只有用戶中最近30天
4. 登錄內登錄...

我數據集的結構如下 -

{ 
    all: { 
    name: "Web App", 
    children: [ 
     { 
     name: "Firm 1", 
     size: 2, 
     children: [ 
      { 
      name: "Cathy", 
      size: 1 
      }, 
      { 
      name: "Paula", 
      size: 1 
      } 
     ] 
     }, 
     { 
     name: "Firm 2", 
     size: 1, 
     children: [ 
      { 
      name: "Sean", 
      size: 1 
      } 
     ] 
     }, 
     { 
     name: "Firm 3", 
     size: 2, 
     children: [ 
      { 
      name: "Jennifer", 
      size: 1 
      }, 
      { 
      name: "Amy", 
      size: 1 
      } 
     ] 
     } 
    ] 
    }, 
    loggedIn7Day: { 
    name: "Web App", 
    children: [ 
     { 
     name: "Firm 1", 
     size: 1, 
     children: [ 
      { 
      name: "Paula", 
      size: 1 
      } 
     ] 
     }, 
     { 
     name: "Firm 3", 
     size: 1, 
     children: [ 
      { 
      name: "Kristin", 
      size: 1 
      } 
     ] 
     } 
    ] 
    } 
} 

我無法弄清楚如何在更新數據集後正確綁定圓圈。

更新數據集後，某些父節點被綁定到子節點，子節點被綁定爲父節點。

這裏是我更新的數據集，並綁定circles-

//change property for pack based on filter 
switch (filter) { 
    case "1": 
     root = allData.loggedIn90Day; 
     break; 
    case "2": 
     root = allData.loggedIn30Day; 
     break; 
    case "3": 
     root = allData.loggedIn7Day; 
     break; 
    default: 
     root = allData.all; 
} 

circle = svg.selectAll(".node") 
    .data(pack.nodes(root)); 

circle 
    .enter() 
    .append("circle"); 

circle 
    .transition() 
    .duration(1500) 
    .attr("class", function (d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) 
    .attr("transform", function (d) { return "translate(" + (d.x - view[0]) * k + "," + (d.y - view[1]) * k + ")"; }) 
    .attr("r", function (d) { return d.r * k; }); 

circle.exit() 
    .transition() 
    .remove(); 

我有我失去了一些東西簡單的感覺，但我不能弄明白。

下面是該問題的一個JS-小提琴 - https://jsfiddle.net/t989hfp9/

任何幫助，不勝感激!!!!

Answer 1

問題是節點沒有唯一的標識符。

我在數據集中添加了一個id屬性到所有節點 -

{ 
    all: { 
    name: "Web App", 
    id: 0, 
    children: [ 
     { 
     name: "Firm 1", 
     id: 1; 
     size: 2, 
     children: [ 
      { 
      name: "Cathy", 
      id: 2, 
      size: 1 
      }, 
      { 
      name: "Paula", 
      id: 3, 
      size: 1 
      } 
     ] 
     }, 
     { 
     name: "Firm 2", 
     size: 1, 
     id: 4; 
     children: [ 
      { 
      name: "Sean", 
      id: 5, 
      size: 1 
      } 
     ] 
     }, 
     { 
     name: "Firm 3", 
     size: 2, 
     id: 7, 
     children: [ 
      { 
      name: "Jennifer", 
      id: 8, 
      size: 1 
      }, 
      { 
      name: "Amy", 
      id: 9, 
      size: 1 
      } 
     ] 
     } 
    ] 
    }, 
    loggedIn7Day: { 
    name: "Web App", 
    id: 0, 
    children: [ 
     { 
     name: "Firm 1", 
     id: 1; 
     size: 1, 
     children: [ 
      { 
      name: "Paula", 
      id: 3, 
      size: 1 
      } 
     ] 
     }, 
     { 
     name: "Firm 3", 
     size: 1, 
     id: 7; 
     children: [ 
      { 
      name: "Amy", 
      id: 9, 
      size: 1 
      } 
     ] 
     } 
    ] 
    } 
} 

然後你指定使用哪個屬性的唯一標識符時綁定數據集包 -

circle = svg.selectAll("circle") 
    .data(pack.nodes(root), function (d) { return d.id; }); 

這裏是固定的小提琴 - https://jsfiddle.net/ferlin_husky/wzuvob6m/