Многоуровневое связывание с d3js

Question

Я пытаюсь реализовать многоуровневое связывание с библиотекой d3. У меня есть набор объектов (Менеджер), где каждый объект содержит собственный набор элементов (Сотрудники). Страница результатов должна содержать элемент для каждого Менеджера. Элемент Manager также должен содержать по одному элементу на каждого сотрудника, указанного в исходном объекте. Мне удалось создать начальную компоновку. Но при обновлении кажется, что d3 не может найти совпадения между существующими элементами, измененными данными. Это просто добавляет дублирующих сотрудников.

Вот скрипка с моим образцом кодом http://jsfiddle.net/02bptmd6/

var initialData = [ 
    {k:1, v:150, items: [{k:1, v:1}, {k:2, v:2}, {k:3, v:3}]}, 
    {k:2, v:100, items: [{k:4, v:4}, {k:5, v:5}]}, 
    {k:3, v:150, items: [{k:6, v:6}, {k:7, v:7}, {k:8, v:8}]}, 
    {k:4, v:60, items: [{k:9, v:9}]}, 
    {k:5, v:200, items: [{k:10, v:10}, {k:11, v:11}, {k:12, v:12}, {k:13, v:13}]}]; 

function updateChart(data){ 
    var bars = d3.select('#container').selectAll('.bar') 
     .data(data, function(d) {return d.k;}); 

    bars.enter() 
     .append('div') 
     .classed('bar', true); 

    bars.transition(1000) 
     .style('width', function(d) {return d.v + 'px';}); 

    bars.exit().transition(1000) 
     .style('width', function(d) {return '0px';}) 
     .style('height', function(d) {return '0px';}) 
     .remove(); 

    var items = bars.selectAll('.items') 
     .data(function(d) {return d.items;}, function(d){return d.k;}); 
    items 
     .enter() 
     .append('div') 
     .classed('item', true) 
     .append('span') 
     .text(function(d) {return d.v}); 
    items.exit() 
     .classed('item_exit', true)   
     .remove(); 
} 

function changeData(){ 
    var data = [ 
     {k:1, v:150, items: [{k:1, v:1}, {k:2, v:2}]}, 
     {k:4, v:150, items: [{k:9, v:9}, {k:14, v:14}, {k:15, v:15}]}, 
     {k:5, v:200, items: [{k:10, v:10}, {k:11, v:11}, {k:12, v:12}]}]; 

    updateChart(data); 
} 

updateChart(initialData); 

Спасибо заранее!

Answer 1

Обнаружили ошибку. Я использую класс «item» для «Employees», но используется для его выбора с помощью селектора «.items».