2014-10-12 3 views
0

저는 수년 동안 여러 국가의 여러 범주의 데이터에서 line + scatterplot을 만들려고합니다.D3 다중 계열 선 그래프

선 그래프가 한 데이터 범주에서 다음 데이터 범주로 계속 이어지는 것이 문제입니다. http://bl.ocks.org/mbostock/3884955에서 예제를 살펴 보았지만 구현해야하는 변경 사항을 이해하지 못했습니다.

요소를 사용하여 데이터를 분리해야합니까? 또는 이것을 수행하는 더 간단한 방법이 있습니까? 산점도

var circle = svg.selectAll('circle') 
     .data(data) 
     .enter() 
     .append("circle") 

// 그리기 라인

var line = d3.svg.line() 

     .x(function(d) 
      {return xScale(d.Year); 
      }) 
     .y(function(d){ 
      return yScale(d.Value); 
      }) 

// 추가 원.

svg.append('path') 
    .datum(data) 
    .attr("d",line) 
    .style("stroke","blue") 
    .style("stroke-width","1px") 
    .style("fill","none") 

// CSV 데이터 파일의 일부. 데이터는 여러 국가에서 반복됩니다.

Variable,Unit,Country,Year,Value,Flags 
"Hepatitis B","% of children immunised","Australia","2001",94, 

"Hepatitis B","% of children immunised","Australia","2002",94, 

"Hepatitis B","% of children immunised","Australia","2003",95, 

"Hepatitis B","% of children immunised","Australia","2004",95, 

"Hepatitis B","% of children immunised","Australia","2005",95, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1980",33, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1981",40, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1982",48, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1983",55, 

"Diphtheria, Tetanus, Pertussis","% of children immunised","Australia","1984",62, 

"Measles","% of children immunised","Australia","1983",68, 

"Measles","% of children immunised","Australia","1984",68, 

"Measles","% of children immunised","Australia","1985",68, 

답변

0

붙여 넣기 코드가 적기 때문에 차트에 전달한 데이터 구조가 올바르지 않은 것 같습니다. http://bl.ocks.org/mbostock/3884955에서 exmaple에서

이 차트는 도시 분류 차트에 전달 된 데이터가 분류되어 도시 어레이 :

var city = svg.selectAll(".city") 
     .data(cities) 
    .enter().append("g") 
     .attr("class", "city"); 

city.append("path") 
    .attr("class", "line") 
    .attr("d", function(d) { return line(d.values); }) 
    .style("stroke", function(d) { return color(d.name); }); 

도시 어레이의 데이터 구조는 다음과 같다 :

- 뉴욕 > 배열 [...]

산 프랜 -> 배열 [...]

오스틴 -> 배열 [...]

세부 사항에 대한 이미지 아래 참조 :

enter image description here

는 도움이되기를 바랍니다.