Я создал базовый пример с фиктивными данными, чтобы попытаться понять, что происходит при добавлении или удалении данных на графике в D3. Пример скрипку можно увидеть здесь.
Насколько я понимаю, внутри функции generateBars (data);
Я обновляю домен x и y, гарантируя, что следующий вызов осей заставит их правильно масштабировать:
testUpdateX.domain(data.map(function(d) {return d.destination;}));
testUpdateY.domain([0, d3.max(data, function(d) {return d.p_in;})]);
Передайте новую переменную данных из параметра:
var bars = svg.selectAll(".testUpdateBar").data(data);
Обновите текущие столбцы x, y, ширину и высоту:
bars.transition().duration(2500)
.attr("x", function(d) {return testUpdateX(d.destination);})
.attr("y", function(d) {return testUpdateY(d.p_in);})
.attr("width", testUpdateX.bandwidth() - 5)
.attr("height", function(d) {return testUpdateHeight - testUpdateY(d.p_in);})
.style("fill", function(d) {
var maxIn = d3.max(data, function(d) {return d.p_in;});
if (d.p_in < maxIn * 0.3) {
return "red";
} else if (d.p_in > maxIn * 0.3 && d.p_in < maxIn * 0.6) {
return "orange";
} else {
return "green";
}
});
Затем добавьте новые "прямые" элементы к новым данным посредством вызова функции .enter()
и примените к ним те же атрибуты и стили:
bars.enter().append("rect").attr("class", "testUpdateBar")
.attr("x", //...)
.attr("y", //...)
etc...
Вызов .exit()
и .remove()
, чтобы удалить бары любых удаленных данных:
bars.exit().transition().duration(2500).remove();
Затем, наконец, перезвоним мои оси, чтобы обновить их в соответствии с недавно указанным доменом:
svg.select(".testUpdateXaxis").transition().duration(2500).call(testUpdateXaxis);
svg.select(".testUpdateYaxis").transition().duration(2500).call(testUpdateYaxis);
Почему последний бар для "Spar" не появляется? По оси Y правильно для него создается новое значение и создается пространство, но элементы прямоугольника, как представляется, не добавляются.
Извините за ненужные имена переменных. Я тестировал это в существующем файле и хотел, чтобы имена не конфликтуют.
Посмотрите на свой код. У вас это есть внутри функции generateBars
:
var svg = d3.select("body");
Поэтому, когда вы нажимаете кнопку, вы фактически добавляете прямоугольник Spar
вашего выбора ввода... вне SVG!
Это должно быть просто:
То есть, ничего!
Вот обновленная версия jsfiddle: https://jsfiddle.net/pugya97h/
svg.someFunction()
обращается к исходному экземпляру svg, в котором хранится фактический элемент SVG? Обновленная скрипка с переходом: jsfiddle.net/TomPlum/mae58joo/8var svg = d3.select("body").append("svg")
, вашvar svg
ссылается на добавленный SVG. Кстати, вы можете сохранить много кода с помощью простой функцииmerge()
: jsfiddle.net/fv8ypv4s