D3 Multi-label X-Axis

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    <div class="legend">
        <table id="key">
            <thead></thead>
            <tbody></tbody>
        </table>
    </div>
</body>

CSS

body {
    font: 11px Arial;
}
path {
    stroke: steelblue;
    stroke-width: 2;
    fill:none;
}
.axis path, .axis line {
    fill: none;
    stroke: #CCC;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.x.axis path {
    display: none;
}
.x.axis2 path {
    display:none;
}
.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
    stroke-width: 0;
}
.dot {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}
div.tooltip {
    position: absolute;
    text-align: center;
    width: 60px;
    height: 28px;
    padding: 3px;
    font: 12px Times;
    border: none;
    border-radius: 8px;
    pointer-events: none;
}
.legend {
    left: 48;
    position: absolute;
    top: 301;
    width: 1686px;
    display: block;
    background-color: snow;
}
#key {
    border-collapse: collapse;
    font: 6px Tahoma;
    font-weight: 500;
    text-align: center;
    padding: 1px 2px;
}
td.totals {
    color: #2CA02C;
    border-left: 1px solid darkgrey;
    border-right: 1px solid darkgrey;
    border-top: 1px solid darkgrey;
    min-width: 15.5px;
    max-width: 15.5px;
}
td.transports {
    color: #1F77B4;
    border-left: 1px solid darkgrey;
    border-right: 1px solid darkgrey;
}
td.powers {
    color: #FF7F0E;
    border-left: 1px solid darkgrey;
    border-right: 1px solid darkgrey;
    border-bottom: 1px solid darkgrey;
}

JavaScript

jsonData =...