2016-06-24 4 views
3

typescriptとwebpackを使用してAngular 2プロジェクトにd3散布図を作成しました。チャートの一部は、mouseoverイベントに応答してツールチップを表示します。今ではmouseoverイベントは実際には完全にうまくいきますが、webpackがタイプスクリプトをトランケートするとエラーが発生します。ここd3イベントエラーのためにタイプスクリプトをトランケイルできません

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"); 
    } 
    }) 

私は比較的新しいですが、上記の問題を集めるのは、正しくマッピングされていないd3入力ファイルと関係しますか?

ご迷惑をおかけして申し訳ございません。

答えて

3

実際のTypeScriptライブラリではないd3では、元のライブラリを記述する.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"); 
    } 
}) 
0

あなたがここにませ性質pageX|pageYを持ってEvent|BaseEventhttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/d3/d3.d.ts

インターフェースを見ることができるように。

おそらく問題を開く必要があります。

+1

ことすなわち、https://github.com/DefinitelyTyped/DefinitelyTyped/issues/4590それは昨年統合されたPRと思われるhttps://github.com/DefinitelyTyped/DefinitelyTyped/pull/4623コードが変更されます。 – vilsbole

関連する問題