이 d3 누적 가로 막 대형 차트 예제에 사용 된 함수 식별

나는 d3 자습서를 통해 자신의 방식대로 작업하고 있으며 d3과 javascript를 모두 배우는 중입니다. 내 목표는 이해하고 다음 URL에서 누적 막대 그래프의 예를 변경하는 것입니다 :이 차트의 코드에서이 d3 누적 가로 막 대형 차트 예제에 사용 된 함수 식별

http://bl.ocks.org/3886208

,이 구절이있다 :

data.forEach(function(d) { 
    var y0 = 0; 
    d.ages = color.domain().map(function(name) **{ return {name: name, y0: y0, y1: y0 += +d[name]}; });** 
    d.total = d.ages[d.ages.length - 1].y1; 
    });

당신이 말해 주 시겠어요 무엇 굵은 선 "{return {name : name, y0 : y0, y1 : y0 + = + d [name]}"에서 종류의 프로세스 또는 함수가 수행되고 있습니까? 나는 그것이 (이름)의 처리를 정의한다는 것을 알았지 만 코드가 너무 간결하여 검색 용어를 이해할 수 없어서 무엇을하는지 발견 할 수 없다. 나는 "js 나 d3에서 x를하는 사람의 예"라고 응답하고, 그것에 대해 더 많이 읽으려면 여기로 가야합니다. "

출처

2012-11-22 ouonomos

중괄호로 묶인 내용은 개체 리터럴입니다. 익명 함수function(name)은 color.domain()이 반환 한 배열의 모든 값에 대해 개체 리터럴을 반환합니다. map은 javascript Array 내장입니다.

정보를 검색하기에 충분합니다. 객체 리터럴은 자바 스크립트에서 많이 사용됩니다. (Crockford의 Javascript : The Good Parts과 같은)이 익명 함수, 클로저 (d3과 같은 프레임 워크에서 많이 사용되는 관용구)를 다루는 괜찮은 입문서를 읽는 것이 좋습니다.

출처

2012-11-22 14:23:15 seb

고마워요! 나는 주말에 자바 스크립트 가이드를 샀다. 그래서 나에게 좋은 출발점이되어야한다. 정말 감사합니다. – ouonomos

행운을 빌어 요! 그건 그렇고, 당신이 질문에 대답한다고 생각한다면, 대답을 업 프리뷰하기보다 "받아 들일"수 있습니다. Stack Overflow 시스템에서 (잠재적으로) 닫힌 것으로 표시됩니다. – seb

나는 당신이 값을 할당 한 후, 코드는 3 개의 다른 개체 (name, y0 및 y1)를 포함하도록 초기화 된 객체를 반환하는 Stacked Bar Chart

의 D3.js 예를 참조하고 생각 y1 또한 변수 y0의 값을 d[name]만큼 증가시킵니다. 나는 동일한 코드를 다시 쓰고 있지만 구문이 다르므로 이해하기 쉽습니다. 사용자의 입력 데이터에 당신이 값 [3, 5, 9] 하나 개의 라인을 포함하는 목록을받은 경우

가

var y0 = 0; // Initialize the temp var 

d.ages = color.domain() 
    .map(function(name) { 
    var myObj = { // Create and initialize the variable that will be returned 
     name: name, 
     y0: y0, 
     y1: y0 + Number(d[name]) 
    }; 

    y0 += Number(d[name]); // Increase y0 

    return myObj; // return the object and continue with the remaining values if there's a list 
});

그래서 예를 들어,은 3 개, 다른 객체를 포함하고있는 ages 객체를 생성합니다 :

var y0 = 0; 
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });

가로 번역 될 수 있습니다 그 라인은 다음과 같습니다 :

기타 등등의 경우에는 해당 값을 사용합니다.

출처

2014-09-04 22:27:08

이 d3 누적 가로 막 대형 차트 예제에 사용 된 함수 식별

답변

관련 문제