Hacker News Reader

Comment by romanr | Hacker News Reader

It seems like a very versatile framework, but nowhere I can find any recipe or guide of a very simple case - how to combine different types of charts in one? Like simple line chart overlaying the bar chart. It seems to be only possible by rendering them as completely separate charts and then overlaying one on top of each other in DOM? Which seems hacky.

View on HN

D3 is pretty low level - geometry and binding data to create DOM elements. It’s not really a charting library - look for libraries built on top of it for abstractions like “composite chart” or whatever.

So yeah at the D3 level you would just draw one chart and then draw another chart on top, probably each wrapped in a <g> if you’re using SVG. Maybe they’d share X/Y scales.

Look into scales, you can put whatever you want in the same chart by positioning it using the same scales. https://github.com/d3/d3-scale

You can use that same scale to draw just one set of axis.

Need multiple Y axis? Create two Y scales with the same range, one X scale.

Also I think it's good to understand that "chart" is not really a concept in D3. You just get all the elements of a chart which is why it is so awesome as you get to compose your own chart just the way you like it!

Can’t you just add both the bars and the path to the SVG you’re rendering to? (I assume it’s the same for a canvas context, although I’ve never used one with d3.)

From my experience, if you want standard charting (bar, line, pie, etc...) you’re better off using either a different library like Highcharts, or something higher-level that’s built on top of D3

Here's an example: https://observablehq.com/@d3/bar-line-chart

Reply on news.ycombinator.com