C3: Migrating to d3 v4

[kt3k]

TODO

• [x] enumerate d3 deps of c3.
  
  
  
  • https://gist.github.com/kt3k/8f4914a4d4b9e772cf03b6a0b1ac07f2
  
  
• [ ] create mapping of d3.v3 usages to d3.v4 apis.

| | d3.v3 | d3.v4 |
|-|-------|------|
| d3-selection | d3.select(selector) | d3.select(selector) |
| | d3.selectAll(selector) | d3.selectAll(selector) |
| d3-transition | d3.transition() | d3.transition() |
| d3-array | d3.max(array) | d3.max(array) |
| | d3.min(array) | d3.min(array) |
| | d3.merge(array) | d3.merge(array) |
| d3-scale | d3.scale.category10() | d3.scaleOrdinal(d3.schemeCategory10) |
| d3-scale | d3.scale.linear() | |
| d3-shape | d3.layout.pie() | d3.pie() |
| | d3.svg.arc() | d3.arc() |
| d3-interpolate | d3.interpolate(a, b) | d3.interpolate(a, b) |
| ? | d3.time | |
| | d3.time.format | |
| | d3.time.format.utc | |

• [ ] determine the necessary range of d3.v4 apis.
• [ ] rewrite code

### DONE

refs #2007, #1648

[mihailik]

@kt3k if that's the whole list, C3 can be made compatible with both.

Are you accepting PRs for this?

[kt3k]

In addition to the above table, I found the below usages:

d3.scale.linear
d3.time
d3.xhr
d3.csv
d3.tsv
d3.keys
d3.set
d3.mouse
d3.behavior.drag()
d3.event.altKey
d3.time.scale
d3.rgb()
d3.svg.line()
d3.svg.area()
d3.svg.brush()
d3.event.type
d3.behavior.zoom()
d3.event.sourceEvent
d3.event.sourceEvent.altKey
d3.event.sourceEvent.type

As far as I know, these are the whole list of d3 deps.

C3 can be made compatible with both.

This sounds interesting! What's the strategy to make it compatible with both versions?

[mihailik]

Could be feature-checking somewhere early on: var d3_pie = d3.pie || d3.layout.pie

I might be naive though, is the usage much more complex than that?

[kt3k]

I guess some of the usages are a little more tricky like d3.scale.category10() becomes d3.scaleOrdinal(d3.schemeCategory10). In this case, probably we need to create a wrapper function.

We have a line like

axis.ticks($$.d3.time[config.axis_y_tick_time_value], config.axis_y_tick_time_interval);

In this case, probably we need to do some special care for it. But I agree your approach would work on most of cases.

[danieliser]

Haven't looked at the code but based on my own experiences and the above lists, I think it should be doable in a decently quick fashion. A good IDE will help you track down function usage quickly and replace them all quickly. I have done very similar many times over with other projects. The hardest part is building that list.

That said I would love to see this. I just found c3 and the one thing we really want to add to this already fantastic lib is annotations which I found we could easily do with another 3rd party d3 lib on top of c3 if c3 works with d3 v4

Just my 2 cents.

[mihailik]

I got an initial batch of changes at https://github.com/c3js/c3/pull/2203

Three troubles jumped straight at me:

• Time formats (fails at core.js around defaultAxisTimeFormat definition)
• d3.brush and d3.zoom look a bit more complex than just rename

Any help appreciated, I'd love to make it work!

[edmBernard]

Is there any update on the migration progress ?

[ivarkallejarv]

There's a fork of c3 that has v4 compatibility and is also modular - https://github.com/naver/billboard.js/
Could be used as reference to make these things work.