D3.js에 여러 줄 그리기

Question

지금까지는 D3 시각화에 선 요소를 추가하기 위해 루프를 사용했지만 API의 정신으로는 보이지 않습니다.

:

var data = {time: 1, value: 2, value2: 5, value3: 3,value4: 2}, 
      {time: 2, value: 4, value2: 9, value3: 2,value4: 4}, 
      {time: 3, value: 8, value2:12, value3: 2,value4:15}]); 

가 나는 이런 식으로 뭔가를 할 수있는 모든 4.

의 X 같은 시간에 네 줄을 싶습니다의 난 일부 데이터를 가지고 있다고 가정 해 봅시다

그런 다음 하나씩 (루프로) 추가하십시오.

var line1 = group.selectAll("path.path1") 
     .attr("d",l(data)); 
var line2 = group.selectAll("path.path2") 
     .attr("d",l2(data)); 
var line3 = group.selectAll("path.path3") 
     .attr("d",l3(data)); 
var line4 = group.selectAll("path.path4") 
     .attr("d",l4(data)); 

이러한 경로를 추가하는 더 일반적인 방법이 있습니까?

Answer 1

예. 그런 다음 한 번에 경로의 모든 요소를 ​​추가 할 수

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { return x(d.time); }) 
    .y(function(d) { return y(d.value); }); 

그리고 :

이

var series = [ 
    [{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 8}], 
    [{time: 1, value: 5}, {time: 2, value: 9}, {time: 3, value: 12}], 
    [{time: 1, value: 3}, {time: 2, value: 2}, {time: 3, value: 2}], 
    [{time: 1, value: 2}, {time: 2, value: 4}, {time: 3, value: 15}] 
]; 

지금 당신은 단지 하나의 일반적인 라인이 필요합니다 우선은 다음과 같이 쉽게 반복에 대해 데이터를 재구성 할 : 당신은 데이터 구조 형식 작게 만들려면

group.selectAll(".line") 
    .data(series) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line); 

, 당신은 별도의 배열로 시간을 추출하고 값에 대한 2 차원 배열을 사용할 수 있습니다. 즉,이과 같습니다 행렬은 시간 값을 포함하지 않는

var times = [1, 2, 3]; 

var values = [ 
    [2, 4, 8], 
    [5, 9, 12], 
    [3, 2, 2], 
    [2, 4, 15] 
]; 

때문에, 당신은 선 발생기의 x-접근에서 그것을 볼 필요가있다. 당신은 Y-규모에 직접 매트릭스 값을 전달할 수 있기 때문에 한편, Y-접근이 단순화 : 요소를 생성

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d, i) { return x(times[i]); }) 
    .y(y); 

은 동일하게 유지 :

group.selectAll(".line") 
    .data(values) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line);