Javascript 使用多个JSON数组数据集创建多图

我正在学习D3，作为一个沙盒示例，我试图创建一个多线图，但我不想使用CSV、TSV或任何类似的东西

关键部分在底部，我基本上在数据集数组上进行迭代（它们本身就是对象数组{data:blah，price:bleh}）

我试图将每个数据集附加到内部svg空间

问题是，在第一个数据集之后，每个后续数据集都将附加到右侧，并远离我的svg容器，我显然希望它保持在相同的svg空间中

这些函数中有很多是用来帮助我管理这些随机生成的数据集的。 对于我使用的数据： momentjs、下划线JS和明显的d3js

var margin, width, height, parseDate, xScale, yScale, xAxis, yAxis, valueLine, nextDay,
    dataSet1, dataSet2, dataSet3, dataSet4, innerSpace;
function tlate(x, y){return 'translate(' + x + ',' + y + ')';}
function day(){
    var today = moment().subtract(1, 'year')
    return function(){
        return moment( today.add(1, 'day') );
    }
}
nextDay = day();

function randomPrice(){
    return _.random(125, 200);
}

function minDay(arr){
    var minimum = moment( moment().add(100, 'years') );
    _.each(arr, function(elem){
        minimum = moment.min(minimum, elem.date)
    })
    return minimum;
}

function maxDay(arr){
    var maximum = moment( moment().subtract(100, 'years') );
    _.each(arr, function(elem){
        maximum = moment.max(maximum, elem.date)
    })
    return maximum;
}

function minOfMultiple(arr, key){
    var min = Number.POSITIVE_INFINITY;
    _.each(arr, function(dataSet){
        _.each(dataSet, function(element){
            min = _.min([min, element[key]])
        })
    })
    return min;
}

function maxOfMultiple(arr, key){
    var max = Number.NEGATIVE_INFINITY;
    _.each(arr, function(dataSet){
        _.each(dataSet, function(element){
            max = _.max([max, element[key]])
        })
    })
    return max;
}


function createDataSet(){
    return [
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()},
        {date: nextDay(), price: randomPrice()}
    ];
}

dataSet1 = createDataSet();
dataSet2 = createDataSet();
dataSet3 = createDataSet();
dataSet4 = createDataSet();

//increased bottom margin so as to give room for rotated x labels
margin = { top: 30, right:20, bottom: 30, left: 50 };
width = 600 - margin.left - margin.right;
height = 270 - margin.top - margin.bottom;


//parse date and time
parseDate = d3.time.format('%b %Y').parse;


//set ranges
xScale = d3.time.scale().range([0,width])
yScale = d3.scale.linear().range([height, 0])

//axis
xAxis = d3.svg.axis()
                .scale(xScale)
                .orient('bottom')
                .ticks(5)

yAxis = d3.svg.axis()
                .scale(yScale)
                .orient('left')
                .ticks(5)


priceLine = d3.svg.line()
                    .x(function(d){ return xScale(d.date) })
                    .y(function(d){ return yScale(d.price) })



//add svg canvas and select innerSpace
innerSpace = d3.select('body').append('svg')
                                .attr('width', width + margin.left + margin.bottom)
                                .attr('height', height + margin.top + margin.bottom)
                            .append('g')
                                .attr('transform', tlate(margin.left, margin.top))


//setting number domains
xScale.domain( [ minDay(dataSet1), maxDay(dataSet1) ] )
yScale.domain( [0,  maxOfMultiple([dataSet1,dataSet2,dataSet3,dataSet4], 'price')] )

_.each([dataSet1,dataSet2,dataSet3,dataSet4], function(ds){
    innerSpace.append('path')
                .attr('class', 'line')
                .attr('d', priceLine(ds))

})

---

我的助手函数将日期扩展到超出预期范围