d3.js 차트에 여러 행 세트 그리기

Question

시간이 지남에 따라 국가의 가져 오기 및 내보내기를 보여주는 두 줄을 표시하는 d3 차트가 있습니다. 그것은 잘 작동하고 'Developing a D3.js Edge'에 설명 된 모듈 스타일을 사용하여 같은 페이지에 여러 차트를 쉽게 그릴 수 있습니다.

그러나 지금은 개의 국가에 두 개의 개의 데이터를 전달하고 양쪽 모두에 대해 가져 오기 및 내보내기 행을 그립니다. 실험의 하루 후, 그리고 그것을 작동하게 만들기에 가깝게, 나는 가지고있는 것을 가지고 이것을 어떻게하는지 알아낼 수 없습니다. 전에 d3을 사용하여 멀티 라인 차트를 성공적으로 그렸습니다. 그러나 여기에서 어떻게 얻을 수 있는지 알 수 없습니다.

내가 여기서 무엇을 볼 수 있습니다 http://bl.ocks.org/philgyford/af4933f298301df47854 (또는 gist를)

나는 많은 코드가있다 깨닫는다. script.js에서 "Hello"라고 표시된 부분이 그려져 있습니다. 첫 번째 줄에 반대하는 것처럼 각 줄마다 줄을 그리는 방법을 배울 수 없습니다.

저는 입니다. 을 적용 할 곳이인데,이 사용법에 맞지 않습니다. 그러나 나는 혼란 스럽습니다.

UPDATE : 내가 jsfiddle에 간단한 버전을 넣어했습니다 http://jsfiddle.net/philgyford/RCgaL/

Answer 1

원하는 것을 얻기위한 열쇠는 nested selections입니다. 먼저 전체 데이터를 SVG 요소에 바인딩 한 다음 데이터 (각 국가)의 각 그룹에 대한 그룹을 추가하고 마지막으로 그룹에 바인딩 된 데이터에서 각 행의 값을 가져옵니다. 코드에서는 (내가 여기에 실제 코드를 단순화했습니다) 다음과 같습니다이에 의해 생성 된 구조는 svg > g > g.lines > path.line.imports과 같은

var svg = d3.select(this) 
       .selectAll('svg') 
       .data([data]); 

    var g = svg.enter().append('svg').append('g'); 

    var inner = g.selectAll("g.lines").data(function(d) { return d; }); 
    inner.enter().append("g").attr("class", "lines"); 

    inner.selectAll("path.line.imports").data(function(d) { return [d.values]; }) 
     .enter().append("path").attr('class', 'line imports') 
     .attr("d", function(d) { return imports_line(d); }); 

. 여기서 수출 라인의 코드를 생략했습니다. 이는 g.lines도됩니다. 귀하의 데이터는 키 - 값 쌍의 목록으로 구성되어 있습니다. 이것은 SVG 구조에 의해 반영됩니다 - 각 g.lines은 키 - 값 쌍에 해당하고 각 경로는 값 목록에 해당합니다.

완료 데모 here.

Answer 2

요점은 당신이 필수적 할 생각이다. 그래서 많은 코드가 있습니다.

svg.append("circle") 
    .attr("cx", d.x) 
    .attr("cy", d.y) 
    .attr("r", 2.5); 

을하지만 그것은 단지 하나의 원, 그리고 당신은 많은 동그라미를 원하는 : 난 정말 마이크 Bostock보다 더 나은 넣어 수 없습니다, 당신은 Thinking with Joins을 시작해야 각 데이터 포인트의 하나. for 루프를 제거하고 무차별 공격을하기 전에,이 미스테이징 시퀀스를 D3의 예제 중 하나에서 고려하십시오.

데이터는 다음과 같은 x 및 y 속성을 가진 JSON 객체의 배열입니다. [{ ""x ": 1.0,"y ": 1.1}, {"x ": 2.0,"y ": 2.5} ...].

svg.selectAll("circle") 
    .data(data) 
    .enter().append("circle") 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }) 
    .attr("r", 2.5); 

나는이 예제를 번역 떠날거야은 An excerxise로 "한 라인에서 여러 라인".