2015-02-06 8 views
0

this example line chart을 기반으로 meteor.js에 반응 형 선형 차트를 구현하고 있습니다. 그 차트에서 들어 올린 코드에서 다음과 같은 블록이 있는데 잘 작동합니다.왜 문자열을 분리해야합니까?

var paths = svg.selectAll("path.line") 
    .data([dataset]); 

paths 
    .enter() 
    .append("path") 
    .attr("class", "line") 
    .attr('d', line); 

paths 
    .attr('d', line); 

paths 
    .exit() 
    .remove(); 

그러나 다음과 같이 작성하려고하면 축이 계속 표시되지만 경로는 렌더링되지 않습니다. 도대체 왜 그럴 수 있겠습니까?

var paths = svg.selectAll("path.line") 
     .data([dataset]) 
    .enter() 
     .append("path") 
     .attr("class", "line") 
     .attr('d', line) 
    .exit() 
     .remove(); 
+0

attr ('d', line) .attr ("d ', line)을 입력하면 두 번째'd '가 첫 번째 방법을 덮어 씁니다. 그것들을 나누어보고 작동하는지 확인하십시오 – rekoDolph

+0

그 부분이 첫 번째 부분에도 있습니다 ... – Goodword

답변

2

다른 개체에서 함수를 호출하기 때문입니다. D3은 .data()에 대한 호출에서 업데이트, 입력 및 종료 선택을 반환합니다. 이는 첫 번째 코드 블록의 paths에 저장됩니다. 그런 다음 enter, update 및 exit 선택 항목을 가져 와서 처리합니다.

두 번째 코드 블록에서 .enter()을 호출하면 나중에 입력 선택을 처리하게됩니다. 즉, .enter() 이후의 모든 코드가 입력 선택에 적용되고 다른 선택에는 적용되지 않습니다.

코드의 첫 번째 블록 에서처럼 의 반환 값 대신 새로 추가 된 path 요소 (오류가 발생 함)에서 .exit().remove()이 호출되고 있습니다.

+0

그래서 포크와 비슷합니까? 또한'paths.attr ('d' , line)'? on – Goodword

+0

아니요, 각각의 .function 호출은 이전 연산의 반환 값에서 작동합니다. 즉, 작업중인 항목이 체인 전체에서 변경 될 수 있음을 의미합니다. 이는 두 번째 코드 블록. 첫 번째 코드 블록의'paths.attr ('d', line)'은 업데이트 선택에서 작동합니다 (이를 얻기 위해 별도의 함수는 없습니다). –

관련 문제