Multi-Level/Grouping of Axis Labels Using d3

charts, d3.js, graph, javascript, svg

Solution

You can add and format several axes however you like. For instance - display one axis showing months, and another showing years. A basic example: http://jsfiddle.net/Ea4mT/1/

You might have to mess with it a little bit afterwards to get it in a more preferable format, but it seems like the core of what you are trying to accomplish.

Problem

I was wondering if there is an easy way to add multi-level/hierarchical/grouping of axis label in d3. For example, if I have a line chart with month name for x-axis spanning across multiple years, I would want to also have year as label below the month names so it looks something like this. ``` Oct Nov Dec Jan Feb Mar Apr |_____________| |___________________| 2011 2012 ``` I understand that you can do anything in SVG to make it works, but I want to use d3 as much as possible so that it's much easier to update the chart dynamically. Thanks, Jack

Original source