График не правильно перерисовывается

Question

В настоящее время я пытаюсь объединить два моих графика в один вид. Мой второй график, гистограмма будет обновлять данные, если вы используете слайдер. Когда вы двигаете его вперед, он отлично работает и денди, но когда вы сдвигаете его назад, он не перерисовывает диаграмму. Когда я работал на гистограмме отдельно, он полностью работал, кажется, что когда я совмещаю его с линейным графиком, он работает только частично.

Я пытаюсь найти причину проблемы, и я думаю, что это что-то не так с этим блоком кода. Если я прокомментирую это, диаграмма перерисовывается правильно.

var chart1 = d3.select("body").append("svg") 
.attr("width", chart1_width + chart1_margin.left + chart1_margin.right) 
.attr("height", chart1_height + chart1_margin.top + chart1_margin.bottom) 
.append("g") 
.attr("transform", "translate(" + chart1_margin.left + "," + chart1_margin.top + ")"); 

Ссылка на мою скрипку: http://jsfiddle.net/flyingburrito/a8fym1ma/3/

Спасибо!

Answer 1

Я переместил гистограмму сверху, и это заставило ее работать нормально. Легким решением было бы сохранить его таким образом.

Лучшим решением было бы проанализировать, почему это происходит. С D3, когда все происходит так, это часто будет в ваших выборах. Это ваша проблема здесь

d3.select("#sexYear").on("input", function() { 
    debugger; 
    d3.select("svg").selectAll("rect").remove(); 
    update(this.value);   
}); 

Вы выбираете «», который SVG выбирает первый SVG, который является линейным графиком, не гистограмма. Это происходит потому, что «d3.select» выбирает первое из того, что вызывается. То, что я сделал добавить класс под названием «шкальный» к BarChart, а затем я выбираю BarChart как таковой

var chart2 = d3.select("body").append("svg") 
.attr('class','barchart') 

и

d3.select("#sexYear").on("input", function() { 
    debugger; 
    d3.select(".barchart").selectAll("rect").remove(); 
    update(this.value);   

fiddle