2012-06-04 6 views
3

자바 스크립트를 배우고 있고, 아래의 사용법을 혼동하고 있습니다. 이 질문은 d3 특정 자바 스크립트보다 더 많을 수 있습니다.Javascript - function argument

var arc = d3.svg.arc() 
.startAngle(function(d) { return d.x; }) 
.endAngle(function(d) { return d.x + d.dx; }) 
.innerRadius(function(d) { return Math.sqrt(d.y); }) 
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); 

http://mbostock.github.com/d3/ex/sunburst.html

그래서,
  1. startAngle로부터, endAngle 등 인자로서의 기능 걸린다. 합리적인 이유는 단순히 숫자가 아닌 함수를 인수로 사용하는 것입니까?
  2. 전체 코드에서 "d"가 정의 된 곳이 없습니다. 거의 모든 d3 프로그램에서 볼 수 있습니다. "d"는 무엇입니까? 어떻게 설정되며 어디로 전달됩니까?

감사합니다.

답변

4

은 :

d3.svg.arc 객체는 파이도 내부 조각을 만드는 데 사용됩니다. 각 슬라이스에는 시작 및 끝 각도를 적절하게 표시해야합니다.

d3.js에서 각 슬라이스에 대해 두 각도를 전달하지 않지만 해당 슬라이스에 해당하는 데이터 요소 인 하나의 인수 d을 취하여 각도를 반환하는 함수를 제공합니다. 여기에 설정된 다른 매개 변수에도 동일하게 적용됩니다.

또 다른 장점은 데이터가 여러 속성으로 구성 될 수 있으며 시각화와 관련하여 어떤 속성이 어떤 속성을 사용하는지 결정할 수 있다는 것입니다.

번째 질문

다른 함수에 파라미터로서 기능하여, 상기 소정 형상의 함수 표현을 사용하는 것이 일반적이다. d3.js에서 매개 변수로 사용되는 대부분의 함수는 하나 또는 두 개의 매개 변수로 전달됩니다 (대부분의 경우 데이터의 일부가 변형되어야 함). 함수 식에서는 매개 변수를 처리하기 위해 매개 변수의 이름을 지정해야합니다.예를 들어, 대부분의 경우 d은 특정 데이터 항목을 보유하는 매개 변수의 매개 변수 이름으로 사용됩니다.

일반적인 함수 매개 변수 일 뿐이므로 다른 곳에서 정의 할 필요가 없습니다.

function startAngleParam(d) { 
return d.x; 
} 

var arc = d3.svg.arc() 
.startAngle(startAngleParam) 
... 
1

d은 익명 함수의 인수로 매우 명확하게 전달됩니다. 아마도

+0

d는 익명 fn으로 전달됩니다. 그러나 다른 프로그래밍 언어 배경에서 오는 경우, d3 라이브러리를 사용하면 d (모든 유형이 무엇이든)를 전달하지 않아야합니다. 그래서 사용자로서, 어떻게 'startAngle'메소드가 필드 x가있는 올바른 d를 얻는 지 확인합니까? – bsr

+0

@bsreekanth startAngle 메서드는 전달한 함수를 호출합니다. 이것이보다 전통적인 OO 인터페이스라면, startAngle 함수가 단일 매개 변수 ("d")를받는 getAngle 메소드로 객체를 수신하는 것과 같습니다. getAngle 메소드의'd' 매개 변수가 startAngle이 호출하는 것과 일치하는지 확인해야합니다. – hugomg

1
이러한 기능 인수로 숫자, 또는 더 복잡한 작업을위한 기능이 걸릴 수 있습니다 (가지 String.replace()이 결과 배열을 실행되는 대체 문자열, 또는 기능을 할 수있는 방법 등을하고는 대체 값을 반환)

1 : 콜백 기능입니다. 함수를 매개 변수로 보낼 때이 함수는 호출되지 않고 함수가 저장되고 나중에 호출 될 수 있으며 필요할 때마다 반복 호출 될 수 있습니다.

2 : 매개 변수 d은 콜백 함수로 보내지는 값으로, 함수가 결과를 생성하는 데 사용합니다. 식별자 이름 d은 콜백 함수에서만 정의되며, 함수가 사용될 때마다 값이 평소와 같이 함수로 보내집니다.

콜백 함수에 전송되는 값은 호의 좌표를 포함하는 개체입니다. 호의 좌표가 변경되면 호를 그리는 데 필요한 다른 값을 계산하기 위해 콜백 함수가 호출됩니다. 첫 번째 질문에 대한

1

는 아직 말씀 드릴 수 없습니다 만, Sirko의 훌륭한 답변에 추가하고 싶었 : 당신이 원하는 경우에, 당신은 다음과 같은 방법으로 재 작성 할 수 있습니다. 그는 참고 :

d3.js에서 각 슬라이스에 대해 두 각도를 전달하지 않지만 해당 슬라이스에 해당하는 데이터 요소 인 하나의 인수 d을 취하여 각도를 반환하는 함수를 제공합니다.

나는 또한 function(d, i) { ... } 양식의 콜백이 발생할 수 있다고 덧붙입니다. 이것을 볼 때 d은 요소의 데이터를 참조하고 i은 색인을 참조합니다. 한 문자로 된 약어는 규칙에 의해 사용되지만 사용자가 원하는 매개 변수를 호출 할 수 있습니다.

데이터를 반복하면서이 두 항목에 모두 액세스 할 수 있습니다. 예를 들어이 자습서에서는 데이터 및 색인을 사용하여 막 대형 차트를 구성합니다. http://mbostock.github.com/d3/tutorial/bar-1.html