D3でレンダリングされたSVGグラフィックに米国の州と郡の地図があります。各パスには、mouseover、mouseout、clickイベントがバインドされているほか、FIPS郡コードがパスIDとして設定されています。d3 - マウスオーバーイベントをトリガーする
私はユーザーが州または郡の名前を入力できるjQueryオートコンプリート入力を持っています。対応するFIPS IDを利用可能にする入力が与えられた場合、どのようにプログラムでマウスオーバーイベントをトリガーできますか？
JavaScriptを構造化して、mouseoverイベントがjavascript関数を呼び出し、必要なときにいつでも同じ関数を呼び出せるようにします。
私は答えを見つけました。主な問題は、D3はjQueryのように明示的なtrigger関数を持たないことです。しかし、あなたはそれをシミュレートすることができます。
d3.json("us-counties.json", function(json){
thisObj._svg.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", thisObj._path)
.attr("class", "states")
.attr("id", function(d){
return d.id; //<-- Sets the ID of this county to the path
})
.style("fill", "gray")
.style("stroke", "black")
.style("stroke-width", "0.5px")
.on("dblclick", mapZoom)
.on("mouseover", mapMouseOver)
.on("mouseout", mapMouseOut);
});
を経由して構築されたD3パスと
var mapMouseOver(d){
d3.selectAll($("#" + d.id))
.style("fill", "red")
.style("stroke", "blue");
}
は一般的に、ほとんどのチュートリアルを使用することを言う塗りと線の色を変更するmouseoverイベントハンドラを持っていると言う
d3.select(this)...
ですが、実際に値を使用しても同様に動作します。あなたはあなたのノードのIDを取得するイベントハンドラを持っている、と
$("#someDropdownSelect").change(someEventHandler)
function someEventHandler(){
//get node ID value, sample
var key = $(this)
.children(":selected")
.val();
//trigger mouseover event handler
mapMouseOver({id : key});
}
を経由して、それをトリガーする場合は、直接にイベントを送出することによって、これを達成することができ、ドロップダウン選択
に基づいてmouseoverイベントを実行します目的の要素：
var event = document.createEvent('SVGEvents');
event.initEvent(eventName,true,true);
element.dispatchEvent(event);
はスティーブGreatrexのソリューションはまで私のために働いたこのblog post
で詳細を参照してください。 iOS 9ではなく、iOS 10では使用できません。
私のコードといくつかの調査をデバッグした後、createEventとinitEvent関数はこのdocumentationとして廃止されていたようです。
これを書いての新しい方法は次のとおりです。
イベントコンストラクタでイベントを作成し、トリガーの新しい方法についての詳しい説明は here見つけることができますvar event = new MouseEvent('SVGEvents', {});
element.dispatchEvent(event);
。
これは完全に機能します。 –