Exit() не работает для гистограммы группы d3

Question

Я создал групповую гистограмму с данными json.on click on legend Я хочу показать и скрыть конкретный бар из группы в диаграмме (используя функции ввода и вывода d3) ,

Мои данные JSON, как это

var values = [{ 
    "timeId": "201501040100", 
    "value": 2454721, 
    "week": 1 
}, { 
    "timeId": "201501040100", 
    "value": 4017731, 
    "week": 2 
}, { 
    "timeId": "201501040100", 
    "value": 6656528, 
    "week": 3 
}, { 
    "timeId": "201501040100", 
    "value": 7472223, 
    "week": 4 
}, { 
    "timeId": "201501040200", 
    "value": 2454721, 
    "week": 1 
}, { 
    "timeId": "201501040200", 
    "value": 3017731, 
    "week": 2 
}, { 
    "timeId": "201501040200", 
    "value": 5017731, 
    "week": 3 
}, { 
    "timeId": "201501040200", 
    "value": 7472223, 
    "week": 4 
}, ]; 

я сгруппировал эти данные, основанные на timeId

решение

weeksVolume = _.groupBy(values, 'timeId'); 
weeksVolume = Object.keys(weeksVolume).map(function(key) { 
    return weeksVolume[key] 
}); 

Рабочая Plunkr здесь https://plnkr.co/edit/sUy564JZfAoKDb24U5VA?p=preview

Теперь нажмите на первой легенде я хочу скрыть и показать «неделю: 1» данные с каждого щелчка. Для этого при нажатии на легенду я обрабатываю модификацию данных (означает удаление или добавление определенных данных недели f rom.

С обновленным набором данных я попытался перерисовать диаграмму, но он не работает должным образом. Каждый раз, когда он удаляет и добавляет данные из последнего индекса.

Answer 1

Ваша проблема в вашей updateChart функции:

function updateChart() { 

    ... 

    volumeBars = week.selectAll("rect") 
     .data(function(d, i) { 
      return d; 
     }); // <= Here is the problem 

    ... 
} 

Вы должны определить способ сделать уникальный каждый элемент для того, чтобы найти их легко. Вы должны приписать ключ, и выбор d3 будет использовать его, чтобы узнать, является ли элемент новым/уже существующим/удаленным из текущего выделения. Второй аргумент функции data делает, что:

volumeBars = week.selectAll("rect") 
    .data(function(d, i) { 
     return d; 
    }, 
    function(d){return d.timeId + d.week;}); 
    //Here you can define the key you want 

Вы можете найти документацию для data функции здесь: https://github.com/d3/d3/wiki/Selections#data

Кроме того, вы не должен создать другой выбор перед вашим exit вызовом. Выбор уже создан раньше, тот же, который вы назвали своим enter. Таким образом, вы можете просто написать:

volumeBars.exit().text(function(d) {console.log(d);}).remove(); 

Здесь обновление plunker: https://plnkr.co/edit/inrD7aC3KYmv8iU2gnkA?p=preview

Надеется, что это помогает.