C3.js Donut Chart,Grow Segment

Question

i'm exploring c3.js, i have created an donut chart, which was very simple to do, next thing i wanted to do is on mouser-over i wanted to expand/zoom/popout that focused segment, this functionality we can see in d3pai., but i'm trying to achieve this effect purely using c3.js. can some one please suggest me how to proceed and how to create such poping-up of segment effect.

var init = function() {
  var chart = c3.generate({
    data: {
      x: 'x',
      columns: [
        ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
        ['Coin1', 30, 200, 100, 400, 150, 250],
        ['Coin2', 130, 100, 140, 200, 150, 50],
        ['Coni3', 50, 100, 130, 240, 200, 150],
        ['Coin4', 130, 100, 140, 200, 150, 50],
        ['Coin5', 130, 150, 200, 300, 200, 100]
      ],
      type: 'donut',
      onclick: function(e) {
        //console.log(e);
        // console.log(d3.select(this).attr("stroke-width","red"));
      },
      onmouseover: function(d, i) {

      },
      onmouseout: function(d, i) {

      }
    },
    axis: {
      x: {
        type: 'timeseries',
        tick: {
          format: '%Y-%m-%d',
          centered: true,
          position: 'inner-right'
        }
      }
    },
    bindto: '#dash',
    bar: {
      width: {
        ratio: 0.5 // this makes bar width 50% of length between ticks
      }

    },
    pie: {
      expand: true,
    },
    tooltip: {
      grouped: false,
      contents: function(data, defaultTitleFormat, defaultValueFormat, color) {
        //  console.log("Containt");
        // console.log(data, defaultTitleFormat, defaultValueFormat, color);
        return "<p style='border:1px solid red;'>" + data[0].value + "</p>";

      }
    }
  });
};
inti();

 p {
   line-height: 1;
   font-weight: bold;
   padding: 5px 12px;
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
   border-radius: 4px;
   line-height: 15px;
   font-size: 12px;
   min-width: 91px;
 }

<html>
  <head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
    </head>
  <body>
<div id="dash"></div>
   
    </body>
  </html>

You could modify c3's piechart source code... Or through configuration, modify the dom element: onclick: function (d, i) { console.log("onclick", d, i); }, `i` is the dom svg element that corresponds to that slice of the pie. If you could decipher what the values in the svg are, you could potentially come up with an equation to modify them: — miir, Oct 28 '15 at 18:20
I went through d3.js tutorial , where guy was creating donuts chat, in same example he used transition() to move svg element, he selected the path (d3.selectAll("path")) ,and apply transition on it to move , i also want to move a segment of donut to pop ahead on mouse hover. in browser, select path element i change the scale value form scale(1,1) to scale(1.2,1.2) it just helped but im not able to achieve programtically — Akash R, Oct 29 '15 at 05:04
This is exactly what i'm trying to achieve in c3 [link](http://jsbin.com/ukaxod/144/embed?js,output) — Akash R, Oct 29 '15 at 06:50

miir · Answer 1 · 2016-05-04T21:59:27.190

0

In the c3 config object, you can define onmouseover and onmouseout callback functions. The DOM node corresponding to the events is passed in as the second argument, so you can use it in the logic.

You can use that to apply things such as transformations. So on mouseover, you could scale it up, and on mouseout, scale it down. This is just a nudge in the right direction. You can play with other transformations to get the effect you want.

onmouseover: function (d, i) {
    // 'i' is the dom node. 
    d3.select(i).attr("transform", "scale(1.1)")
},
onmouseout: function (d, i) {
    d3.select(i).attr("transform", "scale(1)")
}

http://jsfiddle.net/ggamir/eqkrr5j0/

If you want the transformation to persist until the next mouse event, then you can keep track of the last item hovered over, and only "de-transform" it on the next mouseover:

http://jsfiddle.net/ggamir/79qhy9hn/

// Somewhere outside before defining your c3 config object:
var currentSlice;

// Inside your c3 config object:
onmouseover: function (d, i) {
    if(currentSlice !== void 0) {
        currentSlice.attr("transform","scale(1)")
    }

    currentSlice = d3.select(i).attr("transform", "scale(1.1)");
}

edited May 04 '16 at 21:59

answered Oct 29 '15 at 21:32

miir

1,814
1
17
25

Thank you so much @miir, you are the super awesome.I got the idea, i request little more guide from you, if want to create effect like [this donut chart](http://jsbin.com/ukaxod/144/embed?js,output) what property i have change. – Akash R Oct 30 '15 at 08:14
Which effect specifically are you interested in? – miir Oct 30 '15 at 18:42
i saw morris.js example for donut chart, i wanted to make same donut chart in c3. i'm trying break problem and try to find solution on base of D3 lib,so far no success :( – Akash R Oct 31 '15 at 10:08
1

http://stackoverflow.com/questions/37008892/modify-donut-chart-slices-in-c3-d3 @miir This is a modification of your answer you might be able to look in to it – user1010101 May 03 '16 at 17:19
@user1010101 Thank you, I submitted an answer that generalizes the default selected datasets and allows you to set the scaling through c3's initial config object and also through chart.load() – miir May 05 '16 at 00:34

C3.js Donut Chart,Grow Segment

1 Answers1