Переходы D3.js - программирование

Я пытаюсь создать анимированную гистограмму, используя d3.js. Я хочу, чтобы бары отображались один за другим, как этот пример http://nvd3.com/ghpages/multiBar.html. Мне удалось создать аналогичное поведение, но движение начинается с высоты бара, строит планку по оси x, однако я хочу, чтобы движение начиналось с оси x и переходило на высоту бара, как в примере,

Ответы

Ответ 1

Поскольку начало координат системы находится в левом верхнем углу, значение "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)) с той же скоростью. Это приводит к фиксации нижней части стержня по оси.

Надеюсь, это поможет!

Ответ 2

Помните, что масштаб x направлен назад к тому, что вы ожидаете (бары должны быть построены вверх снизу (где bottom = svg height). Используйте переход на анимированные столбцы при вводе.

Пример того, что, как я думаю, вы пытаетесь достичь, можно найти здесь: http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1

Все самое лучшее,

Джим