다중 JSON 배열 데이터 세트를 사용하여 다중 그래프 만들기

Question

D3을 배우고 샌드 박스 예제로 다중 선 그래프를 만들려고하지만 CSV, TSV 또는 유사한 것을 사용하고 싶지 않습니다. {어쩌구, 가격 : 데이터 bleh}.

의 핵심 부분은 기본적으로 내가 스스로 객체의 배열 인 데이터 세트 (의 배열을 통해 반복하는 일을 해요 하단에

그리고 난 노력하고있어

문제는 첫 번째 데이터 세트 이후에 각각의 후속 데이터 세트가 오른쪽에 추가되고 내 SVG 컨테이너에서 매우 멀리 떨어지며 분명히 동일한 데이터 세트 안에 머물러 있기를 원합니다. SVG 공간

많은 함수가 fo 이 무작위로 생성 된 데이터 세트를 관리하도록 도와줍니다. 내 내가 사용 데이터의 경우 : momentjs, underscorejs, 분명히는

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

내 도우미 함수가 의도 한 범위 과거 날짜를 확장했다 d3js.