D3.js - Обновление данных диаграммы с кнопками

Question

Итак, я пытаюсь получить диаграмму d3.js для перехода к различным значениям при нажатии кнопки. Хотя на данный момент некоторые элементы, кажется, добавляют, но чрезвычайно широкие и повсюду, а также предыдущие элементы, которые не удаляются.

Это мой код:

function updateData(time) { 

timeValue = time; 


// Get the data again 
d3.tsv(timeValue + ".tsv", function(error, data) { 
    x.domain(data.map(function(d) { return d.letter; })); 
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 
// Scale the range of the data again 
x.domain(d3.extent(data, function(d) { return d.letter; })); 
y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

//Selecting Data 
var bars = svg.selectAll("rect") 
     .data(data); 


//Removing 
bars.exit().remove("rect"); 

//Changes 
bars.enter().append('rect') 
.attr("class", "bar") 
bars.attr('x', function(d) { return x(d.letter); }) 
.attr('width', x.rangeBand()) 
.attr('y', function(d) { return y(d.frequency); }) 
.attr("height", function(d) { return height - y(d.frequency); }); 
//var svg = d3.select("div.innerScreen2").transition();   
}); 

Теперь я смотрел на подобные вопросы заданы и попытались применить решения, но ничего не кажется, чтобы удалить или изменить:/Может быть, у меня есть код в неправильном месте ? Любая помощь будет очень благодарна

Answer 1

В вашем вопросе есть две проблемы. Первая проблема связана с шаблоном обновления, что некоторые элементы добавлены, а некоторые нет. У вас есть уникальный идентификатор в вашем наборе данных? Если да, то вы можете использовать функцию в процессе обновления:

// Join new data with old elements, if any. 
var text = svg.selectAll("text") 
     .data(data, function(d) { return d.id; }); 

Источник: http://bl.ocks.org/mbostock/3808234

Вторая проблема связана с вашим X/Y позиции и может зависеть от ваших исходных данных. Для решения этой проблемы необходимы выдержка или отладочная информация.