d3 이벤트 오류로 인해 타이프 스크립트를 번역 할 수 없습니다.

Question

typescript 및 webpack을 사용하여 Angular 2 프로젝트에 d3 scatterplot 차트가 있습니다. 차트의 일부가 mouseover 이벤트에 응답하여 툴팁을 표시합니다. 이제 mouseover 이벤트가 실제로 완벽하게 발생하지만 webpack이 타이프 스크립트를 전달할 때 오류가 발생합니다.

Property 'pageX' does not exist on type 'Event | BaseEvent'. 

여기 차트 소자의 마우스 오버 부분 위반 d3.event.pageX를 나타내는 단편이다.

.on("mouseover", (d: any) => { 
    if(d.roleName) { 
     div.transition() 
     .duration(200) 
     .style("display", "block") 
     .style("opacity", 1); 
     div.html(d.roleName + "<br/>" + d.org.name) 
     .style("left", (d3.event.pageX) + "px") 
     .style("top", (d3.event.pageY-80) + "px"); 
    } 
    }) 

나는 typescript에 비교적 익숙하지만 위의 문제점을 모으는 것은 d3 입력 파일과 올바르게 매핑되지 않을 수 있습니다.

모든 안내가 크게 감사드립니다.

Answer 1

d3이 실제 TypeScript 라이브러리가 아니기 때문에 원본 라이브러리를 설명하는 .d.ts 파일을 얻습니다. 이 경우에는 알 수없는 다른 유형으로 캐스팅 시도하거나 컴파일러에서이 작은 부분을 무시할 수 있도록 온 ("마우스 오버"그 d3.event 실제로 된 MouseEvent를 의미 내에서 그 :

.on("mouseover", (d: any) => { 
    if(d.roleName) { 
    div.transition() 
     .duration(200) 
     .style("display", "block") 
     .style("opacity", 1); 
    div.html(d.roleName + "<br/>" + d.org.name) 
     .style("left", ((<any>d3.event).pageX) + "px") 
     .style("top", ((<any>d3.event).pageY-80) + "px"); 
    } 
}) 

Answer 2

여기 하지 특성 pageX|pageY이 Event|BaseEventhttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/d3/d3.d.ts

인터페이스를 볼 수 있듯이.

아마 문제를 열어야합니다.