Question

我学习D3并作为沙箱示例我尝试创建多线图，但我不想使用CSV，TSV或任何类似的东西。

关键部分位于底部，我基本上在迭代数据集数组（它们本身就是对象数组{data：blah，price：bleh}。

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

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

很多这些功能都是为了帮助我管理这些随机生成的数据集。对于我的数据，我使用： momentjs，underscorejs，显然是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))

})

Answer 1

我的助手功能是延长超出预期范围的日期。

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

1 个答案: