user1010101 user1010101 - 6 months ago 69
Javascript Question

Modify Donut Chart Slices in C3/D3

I have created a simple donut chart using c3.js. Here is the FIDDLE.

If you hover over a slice of the Donut it will stick out. I was wondering if it is possible for the slice to stick out by default without hovering over.

For example i want slice A, slice B, and C to stickout by default How can I do that?

Here is my Code

var currentSlice;

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'],
['A', 30, 200, 100, 400, 150, 250],
['B', 130, 100, 140, 200, 150, 50],
['C', 50, 100, 130, 240, 200, 150],
['D', 130, 100, 140, 200, 150, 50],
['E', 130, 150, 200, 300, 200, 100]
],
type: 'donut',
onclick: function (e) {

},
onmouseover: function (d, i) {
if(currentSlice !== void 0) {
'currentSlice'.attr("transform","scale(1)")
}

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


},
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>";

}
}
});

rby rby
Answer

You can use setTimeout() to scale specific slices, once the chart is rendered. Here's one way:

setTimeout( function() {
  d3.selectAll('.c3-arc-A, .c3-arc-B, .c3-arc-C').attr("transform", "scale(1.2)");       
}, 5);

Place this call after your c3.generate() call.

Comments