C3 Trigger animation and assign id to paths

Question

I'm using c3.js which is a "D3-based reusable chart library." I have also created my own legend for a donut chart with a pie chart inside. I want to link the legend and charts so that if I click a legend item, it'll trigger animation on both the legend div and the corresponding path element on the donut/pie chart, or vice versa (clicking on the pie/donut path will trigger animation on both). I know you can set onclick event listeners for the c3 items, but without any id I can't identify the corresponding legend div. Also, if I set a click handler on the legend divs, I won't know the corresponding path and I also don't know how to trigger c3's built in click animations.

EDIT: I found that you can trigger a selected state (http://c3js.org/reference.html#api-select) but you must pass it an id. On my charts, there are no id's to pass in. Is there a way to set custom id's for each data point?

2 year on SO, 74 reputation and still format questions in this unpleasant fashion.. I'm disappointed. Please include some code. — Piotr Dajlido, Mar 24 '15 at 16:57
Sorry, I was never shown formatting conventions. Can you point me to somewhere that will teach me? — Jarryd Goodman, Mar 24 '15 at 19:39

score 0 · Answer 1 · answered Mar 24 '15 at 17:04

In order to use the select API call, you need not assign your own id. What you can do, is pass in the data set represented by the graph, and then the index(es) of the data point(s) in the data set to select.

For example, your donut chart is graphing a dataset called salesBreakdown which has 10 elements. When somebody clicks on the first div on the legend, you can call:

chart.select(['salesBreakdown'], [0], true);

This will set the selected state on the arc corresponding to salesBreakdown[0]. The true resets the state of all other arcs, you can leave this false if you want to do multiselect or something of the sort.

C3 Trigger animation and assign id to paths

1 Answers1