d3.js를 사용하여 애니메이션 막대 그래프를 만들려고합니다. 이 예제처럼 바가 하나씩 나타나길 바란다 http://nvd3.com/ghpages/multiBar.html. 비슷한 동작을 만들 수 있었지만 막대의 높이에서 시작하는 모션은 x 축을 기준으로 막대를 만듭니다. 그러나 x 축에서 시작하여 예제처럼 막대의 높이로 이동하려는 경우 . 내 코드의D3.js 전환
많은 단순화 된 버전 : 좌표계의 원점은 왼쪽 상단의 'Y'값이에 정박에서이기 때문에 어떤 도움이 많이
주시면 감사하겠습니다 http://jsfiddle.net/gorkem/ECRMd/
각 막대의 상단. 'y'값이 고정되고 '높이'가 증가하면 막대가 자라고있는 것처럼 보입니다. 막대가 바닥에서 자라게하려면 'y'와 'height'를 동시에 전환해야합니다.
내가 찾고있는 것입니다. 두 줄만 변경했습니다.
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. 값))를 같은 비율로 줄입니다. 이것은 막대의 바닥을 축에 고정시키는 효과가 있습니다.
희망이 도움이됩니다.
는 x-규모는 막대 하단 (하단 = SVG 높이)에서 위쪽으로 구축 할 수있다 (무엇을 기대에 거꾸로 기억하십시오. 입력에 막대를 애니메이션 전환을 사용합니다.
의 예를 무엇 난 당신이 여기에서 찾을 수 있습니다 달성하려고 생각 : 많은 http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1
모든 최고의,
짐
덕분에, 나는 버전 뭔가 문제가되었다 –
완벽하게 작동 y 전환() 전에 높이를 0으로 설정할 때까지 이와 비슷한. 다음과 같은 것 :'.attr ("height", function (d) {return 0;})' – kendlete