web-dev-qa-db-ja.com

d3-マウスオーバーイベントをトリガーする

D3によってレンダリングされたSVGグラフィックで、米国の州と郡の地図を持っています。各パスには、mouseover、mouseout、clickイベントがバインドされており、パスIDとしてFIPS郡コードが設定されています。

ユーザーが州または郡の名前を入力できるjQueryオートコンプリート入力があります。対応するFIPS IDを使用可能にする入力が与えられた場合、プログラムでマウスオーバーイベントをトリガーするにはどうすればよいですか？

d3.jssvgdom-eventsmouseover
14
Jason

私は答えを見つけました。主な問題は、jQueryのようにD3に明示的なtrigger関数がないことです。ただし、それをシミュレートすることはできます。

経由で構築されたD3パスがあるとします

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

塗りと線の色を変更するマウスオーバーイベントハンドラー

var mapMouseOver(d){

  d3.selectAll($("#" + d.id))
    .style("fill", "red")
    .style("stroke", "blue");

}

通常、ほとんどのチュートリアルでは、

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

}

ドロップダウンの選択に基づいてマウスオーバーイベントを実行します

7
Jason

これは、目的の要素にイベントを直接ディスパッチすることで実現できます。

var event = document.createEvent('SVGEvents');
event.initEvent(eventName,true,true);
element.dispatchEvent(event);

詳細については、こちらをご覧ください ブログ投稿

6
Steve Greatrex

Steve Greatrexのソリューションは、iOS 9までは機能しましたが、iOS10では機能しませんでした。

私のコードといくつかの調査をデバッグした後、問題はcreateEvent関数とinitEvent関数が次のように非推奨になったということだったようです documentation 。

これを書く新しい方法は次のとおりです。

var event = new MouseEvent('SVGEvents', {});
element.dispatchEvent(event);

イベントコンストラクターを使用してイベントを作成およびトリガーする新しい方法の詳細については、 ここ を参照してください。

2
Alki

Mouseoverイベントがjavascript関数を呼び出すようにjavascriptを構造化すると、いつでも同じ関数を呼び出すことができます。

2
Robert Longson