Multi-line chart based on d3.chart, extending d3.chart.base, showing how to add accessor functions to change shape of multi-level data on the fly, as an alternative to the d3.chart dataAttributes approach, which can only handle one level.

linechart.js

d3.chart('BaseChart').extend('LineChart', {
    initialize: function () {
        var chart = this

        var lines = chart.base.append('g')
            .classed('lines', true)

        var line = d3.svg.line()

        chart.xScale = d3.time.scale()
        chart.yScale = d3.scale.linear()
        chart.colors = d3.scale.category20()

        chart._getX = function (d) { return d.x }
        chart._getY = function (d) { return d.y }
        chart._getValues = function (d) { return d.values }
        chart._getName = function (d) { return d.name }
        chart._domain = null
        chart._range = null

        this.layer('lines', lines, {
            dataBind: function (data) {
                chart.colors.domain(data.map(chart._getName))

                chart.xScale
                    .domain(chart._domain || [
                        d3.min(data, function (d) { return d3.min(d.data, chart._getX)}),
                        d3.max(data, function (d) { return d3.max(d.data, chart._getX)})
                    ])
                    .range([0, chart._width])

                chart.yScale
                    .domain(chart._range || [
                        0,
                        d3.max(data, function (d) { return d3.max(d.data, chart._getY)}) * 1.1
                    ])
                    .range([chart._height, 0])

                line
                    .x(function (d) { return chart.xScale(chart._getX(d)) })
                    .y(function (d) { return chart.yScale(chart._getY(d)) })

                return this.selectAll('path').data(data)
            },
            insert: function () {
                return this.append('path')
                    .classed('line', true)
                    .style('fill', 'none')
                    .style('stroke', function (d) { return d.color || chart.colors(chart._getName(d)) })
            },
            events: {
                enter: function () {
                    return this.attr('d', function (d) { return line(chart._getValues(d)) })
                }
            }
        })
    },
    x: function (_) {
        if (!arguments.length) return this._getX
        this._getX = d3.functor(_)
        return this
    },
    y: function (_) {
        if (!arguments.length) return this._getY
        this._getY = d3.functor(_)
        return this
    },
    values: function (_) {
        if (!arguments.length) return this._getValues
        this._getValues = d3.functor(_)
        return this
    },
    name: function (_) {
        if (!arguments.length) return this._getName
        this._getName = d3.functor(_)
        return this
    },
    domain: function (_) {
        if (!arguments.length) return this._domain
        this._domain = _
        return this
    },
    range: function (_) {
        if (!arguments.length) return this._range
        this._range = _
        return this
    }
})