c3js/c3

bar chart animation and transition problem

Opened this issue · 0 comments

KangSeongWoo commented

hi i have some problem

i am new with c3.js also svg and d3.js too

but norw i need to barchart with animation

i hope it could be grow up each column orderly

is there any chance to do that???

i hope i can get answer!! thanks!

C3 version: 0.4.11 - rc4
D3 version: 3.5.17
Browser: chrome 119.0.6045.105
OS: MAC 12.7

*** here is my code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
var chart3 = c3.generate({
      bindto : "#chart3",
      data : {
        x : 'x',
        type: 'bar',
        types: {
            data3: 'line',
        },
        columns: [
          ['x', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01', '2017-01-01', '2018-01-01', '2019-01-01', '2020-01-01', '2021-01-01', '2022-01-01', '2023-01-01', '2024-01-01', '2025-01-01', '2026-01-01', '2027-01-01'],
          ['data1', 0, 350, 300, 120, 0, 600, 750, 800, 920, 1100, 1300, 1350, 1500, 1620, 2000, 0],
          ['data2', 0, 100, 140, 200, 0, 230, 300, 340, 400, 550, 630, 700, 840, 1000, 1150, 0],
          ['data3', 30, 50, 80, 100, 110, 130, 150, 200, 230, 250, 300, 350, 400, 500, 550, 0],
        ],
        groups: [
            ['data1', 'data2']
        ],
        colors: {
          data1: color_data[0],
          data2: color_data[1],
          data3: color_data[2],
        },
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: '%Y'
          }
        },
        y: {
          max: 40000,
          min: 0,
          // Range includes padding, set 0 if no padding needed
          // padding: {top:0, bottom:0}
        }
      },
      bar: {
        width : {
          ratio : 1
        },
      },
      onrendered : function() {
        var totalLength1 = d3.selectAll(".c3-chart-lines path").node().getTotalLength()
        
        d3.selectAll(".c3-chart-lines path")
          .attr("stroke-dasharray", totalLength1 + " " + totalLength1)
          .attr("stroke-dashoffset", totalLength1)
          .transition()
          .duration(2000)
          .ease("linear")
          .attr("stroke-dashoffset", 0);
 
        d3.selectAll(".c3-chart-bars path").each(function() {
          console.log(d3.select(this).node())
          var totalLength2 = d3.select(this).node().getTotalLength()
          d3.select(this)
            .attr("stroke-dasharray", 10 + " " + 10)
            .attr("stroke-dashoffset", 50)
            .transition()
              .duration(2000)
              .ease("linear")
              .attr("stroke-dashoffset", 0);
        })
      }
    })
cs