y 축 스케일이 익명 함수 내에서 정의되지 않았습니다

Question

왜 아래 코드가 저에게 효과적이지 않은지 보지 못했습니다.

참고 : 저는 D3 v4를 사용하고 있습니다. I는 별도 지정 경로 요소 y 축을 따라 배치된다 (즉, 맞춤 모양)을 작성하고자 displayData의 각 요소

// DATA JOIN 
var dataJoin = vis.svg.selectAll(".group") 
    .data(vis.displayData); 

// ENTER + UPDATE 
var group = dataJoin.enter().append("g") 
    .attr("class", "group"); 

group.append("path") // ENTER 
    .attr("class", "line") 
    .style("opacity", 0.5) 
    .merge(group) // ENTER + UPDATE 
    .transition() 
    .duration(800) 
    .attr("d", function(d) { 
     return vis.y(d.beginDate); <------- vis.y() is undefined 
    }); 

. 각 경로 요소는 y 축을 따라 적절한 지점에 경로 요소를 배치 할 수 있도록 vis.y() 배율을 사용해야합니다.

그러나, vis.y()는 .attr 함수 호출 내에서 정의되지 않습니다. 왜? 다른 버전의 D3 시각화를 구현했지만 (버전 3을 사용하고 있었음에도 불구하고) .attr 함수 호출의 내부에서 규모를 사용 했으므로 이제는이 문제가 발생하는 이유는 무엇입니까?

기본적으로 y 축의 다른 위치에서 시작되는 각 요소에 대한 사용자 지정 경로가있는 사용자 지정 셰이프를 추가하려고합니다. 내가 잘못된 방향으로 가고있는 것처럼 느껴지면 다른 제안을 해주십시오.

은 다음과 스케일을 사용

데이터는 객체의 배열은 다음과 같이 구성되어

vis.y = d3.scaleTime() 
    .range([vis.height, 0]); 

vis.y.domain([ 
    d3.min(vis.displayData, function(d) { return d.beginDate; }), 
    d3.max(vis.displayData, function(d) { return d.endDate; }) 
]); 

: 나는 왜 설명 할 수없는 여전히 일어나고 있지만 있었는지 알게

var obj = { 
    name: d.Name, 
    type: d.type, 
    beginDate: d.beginDate, 
    endDate: d.endDate, 
    eventDate: d.eventDate 
}; 

Answer 1

그것은 일어나고있다. 나는 두 가지 예를 제공하기 위해거야, 두 예제는 한 라인을 제외하고 정확히 동일합니다

가

마주 마주

.attr("d", function(d) { 
    return d.beginDate; 
}); 

이

.attr("d", function(d) { 
    return vis.y(d.beginDate); 
}); 

을 정의 정의되지 내가 "정의 된"vs "정의되지 않은"은 코드를 단계별로 실행하여 return 문을 중단 한 다음 콘솔에 "vis"를 입력하면 한 경우에는 개체가 반환되고 다른 경우에는 개체가 정의되지 않았습니다.

어떤 이유로 응용 프로그램을 실행하기 전에 return 문에서 vis.y()를 선언하면 vis가 정의되고 그렇지 않으면 그렇지 않습니다. 이 바이올린은 깨진 행동과 작동하는 행동을 모두 보여 주어야하지만 (JS가 "소스"보기에 어디에 있는지 모르기 때문에 실제 바이올린에 중단 점을 넣을 수는 없습니다.) 둘 다 로컬로 실행했습니다. 다시 한 가지 차이점은 위의 한 줄입니다.

브로큰

https://jsfiddle.net/39exh1s8/1/