7

I'm looking into charting libraries and I'm very impressed by the power of D3, but I'm kind of mind-boggled by its documentation. It would be a much easier decision to go with C3 instead if I knew that I could still use D3 to fill in whatever limitations C3 has.

So is it possible, with C3, to use D3 functionality to enhance charts generated with C3?

B T
  • 57,525
  • 34
  • 189
  • 207
  • 1
    Yes. C3 is built on top of D3. – Lars Kotthoff Apr 10 '15 at 22:34
  • 1
    @LarsKotthoff Just cause A is built on top of B doesn't mean they can interoperate - it all depends on how much of D3 C3 exposes. I'd appreciate some examples to show how one might enhance a C3 chart using D3. – B T Apr 11 '15 at 01:48
  • 2
    Both D3 and C3 operate on the DOM. Modifying the DOM with C3 doesn't prevent you from using D3 to modify it further, similar to the other libraries built on top of D3, such as NVD3. How you might want to "enhance" C3 charts depends entirely on your use case. – Lars Kotthoff Apr 11 '15 at 03:09
  • I appreciate the basic insight and reference to NVD3. An example would clarify things for me a whole lot tho. – B T Apr 11 '15 at 10:43
  • 1
    An answer from the creator of D3: https://github.com/masayuki0812/c3/issues/1112#issuecomment-91938465 – B T Apr 12 '15 at 00:37

1 Answers1

9

Your question is a little too vague to be answerable -- how exactly do you want to use d3 to modify a c3 generated chart?

That said, I'll take a shot at answering anyway. d3 is all about selecting/appending DOM elements, binding data to them and then manipulating them. After c3 does it's thing, there is nothing stopping you from selecting on what it generated and modifying it further.

Here's the simplest example I can think of:

// basic c3 line chart
var chart = c3.generate({
  data: {
    columns: [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ]
  }
});

// select all it's "circles" and make them red
d3.selectAll(".c3-circle")
  .style("fill","red");

If I was you, though, I'd bite the bullet and just learn d3. If you are looking at a plotting library built on top of d3 and saying you need more, your code will be cleaner and more maintainable built from the ground up with straight d3.

Mark
  • 106,305
  • 20
  • 172
  • 230
  • Thanks for the answer, that's very helpful! Do you know if your advice also applies to Dimple or NVD3? – B T Apr 11 '15 at 23:45
  • @BT, yes my advice stands. I do prefer `NVD3` to `c3` and `dimple` though. – Mark Apr 12 '15 at 13:48