Я пытаюсь создать анимированную гистограмму, используя d3.js. Я хочу, чтобы бары отображались один за другим, как этот пример http://nvd3.com/ghpages/multiBar.html. Мне удалось создать аналогичное поведение, но движение начинается с высоты бара, строит планку по оси x, однако я хочу, чтобы движение начиналось с оси x и переходило на высоту бара, как в примере,
Упрощенная версия моего кода: http://jsfiddle.net/gorkem/ECRMd/
Любая помощь будет высоко оценена
Поскольку начало координат системы находится в левом верхнем углу, значение "y" закрепляется в верхней части каждого столбца. Если значение "y" фиксировано, а "высота" увеличена, похоже, что бары растут. Чтобы заставить бары расти снизу, вам нужно будет одновременно переходить как "y" , так и "высота".
Это должно быть то, что вы ищете, я только изменил две строки.
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", function(d, i) { return x(i) - .5; })
.attr("y", function(d) { return h - .5; }) //new----
.attr("width", w)
.transition().delay(function (d,i){ return i * 300;})
.duration(300)
.attr("height", function(d) { return y(d.value); })
.attr("y", function(d) { return h - y(d.value) - .5; }); //new-----
Я начал использовать значение "y" в нижней части диаграммы (h - 0,5). Затем при переходе вы увеличиваете "высоту" (y (d.value)) и уменьшаете "y" (h - y (d.value)) с той же скоростью. Это приводит к фиксации нижней части стержня по оси.
Надеюсь, это поможет!
Помните, что масштаб x направлен назад к тому, что вы ожидаете (бары должны быть построены вверх снизу (где bottom = svg height). Используйте переход на анимированные столбцы при вводе.
Пример того, что, как я думаю, вы пытаетесь достичь, можно найти здесь: http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1
Все самое лучшее,
Джим