d3.js 다중 y 축 선형 차트

Question

원으로 플롯 된 여러 개의 y 축 값이있는 차트를 만들었습니다. 이제 각 y 축 값을 선으로 연결하려고합니다 (기본적으로 선 차트).

내 오류가 나는 y 축 라인 값을 정의하려고 시도하고 방법에있다 생각 : 여기

 var line = d3.svg.line() 
        .x(function(d) { return x(d.x); }) 
        .y(function(d) { return y(d.y1, d.y2, d.y3); }); 

내 데이터 세트입니다 :

var dataset = [ 
     {x: d3.time.hour.utc.offset(now, -5), y1: 1, y2: 3, y3: 2}, 
     {x: d3.time.hour.utc.offset(now, -4), y1: 2, y2: 2, y3: 4}, 
     {x: d3.time.hour.utc.offset(now, -3), y1: 3, y2: 3, y3: 1}, 
     {x: d3.time.hour.utc.offset(now, -2), y1: 4, y2: 1, y3: 2}, 
     {x: d3.time.hour.utc.offset(now, -1), y1: 5, y2: 5, y3: 3}, 
     {x: now, y1: 6, y2: 4, y3: 3}, 
    ]; 

그리고 여기의 완벽한 예입니다 내 지금 그래프 : http://jsbin.com/edikeg/1/edit

line() 메소드 api 참조를 읽었지만 시도해야 할 사항이 확실하지 않습니다. 누구든지이 작업을 수행하기위한 최선의 방법을 추천 할 수있을뿐 아니라 d3.js를 시작하는 데 필요한 추가 정보 나 초보자 리소스를 살펴볼 수 있으면 크게 감사하겠습니다.

감사합니다.

Answer 1

먼저 데이터 세트가 최적이 아닌 형식입니다. 더 나은 형식은 각 선/점 집합에 대해 하나의 객체를 만드는 것입니다.

var dataset = [ 
    [ 
     {x: d3.time.hour.utc.offset(now, -5), y: 1}, 
     {x: d3.time.hour.utc.offset(now, -4), y: 2}, 
     {x: d3.time.hour.utc.offset(now, -3), y: 3}, 
     {x: d3.time.hour.utc.offset(now, -2), y: 4}, 
     {x: d3.time.hour.utc.offset(now, -1), y: 5}, 
     {x: now, y: 1} 
    ], 
    [ 
     // y2-values paired with x-values 
    ], 
    [ 
     // y3-values paired with x-values 
    ] 
];  

왜 묻는 거죠? d3를 사용하여 객체 및 객체 그룹을 쉽게 만들 수 있기 때문입니다. 필요한 경우 현재 데이터를이 형식으로 변환하는지도 함수를 작성할 수도 있습니다.

더 쉬운 형식의 데이터를 사용하면 선과 원을 만드는 코드가 데이터 집합의 항목 수에 종속되지 않습니다. 여기에 작업을 확인, 재 버전 : 무엇을 무슨 일이 일어나고의

http://jsbin.com/edikeg/3/edit

기본 설명 : 우리는 g.line를 만들 데이터 세트의 각 항목에 대해

가하는 pathContainer 각 경로의 각을 잡아 그것의 원형 점.

var pathContainers = svg.selectAll('g.line') 
    .data(dataset); 

    pathContainers.enter().append('g') 
    .attr('class', 'line'); 

그런 다음, 각 pathContainer에, 우리는 path을 만듭니다.

pathContainers.selectAll('path') 
    .data(function (d) { return [d]; }) // continues the data from the pathContainer 
    .enter().append('path') 
     .attr('d', d3.svg.line() 
     .x(function (d) { return xScale(d.x); }) 
     .y(function (d) { return yScale(d.y); }) 
     .interpolate('monotone') 
    ); 

마지막으로, 우리는이 도움이 각 pathContainer

pathContainers.selectAll('circle') 
    .data(function (d) { return d; }) 
    .enter().append('circle') 
    .attr('cx', function (d) { return xScale(d.x); }) 
    .attr('cy', function (d) { return yScale(d.y); }) 
    .attr('r', 5); 

희망의 데이터 세트의 각 포인트에 대한 circle을 만들!