1

私はデータマップmouseoverを使用しており、バブルのイベントをカスタマイズしました:

map.svg.selectAll('.datamaps-bubble').on('click', function(info) {
  // do something
}).on('mouseover', function(info) {
      // do something else
  }).on('mouseout', function(info) {
      // do something else
  });

しかし、私は自分のことをしたいしpopupTemplate、バブル構造を定義したときにプロパティで設定されたテンプレートポップアップを表示したい:

map_ips.bubbles(
  bubbles,
  {
    popupTemplate: function (geography, data) {
      return '<div class="hoverinfo"><strong>' + data.name + '</strong>' +
        ' <br />' +
        'Country: <strong>' +
        data.country_name +
        '</strong>' +
        '</div>';
     }
   });

どうすればこれを達成できますか？イベントリスナー内でポップアップを表示するにはどうすればよいですか? いくつかの要素に CSS クラスを追加したいのでmouseover、 とイベントを制御する必要があり、.mouseoutmouseovermouseout

4

1 に答える 1

2

マウス クリックは問題ありません。だから、あなたはあなたのやり方でそれを行うことができます。

d3.selectAll('.datamaps-bubble').on('click', function(info) {
  console.log("hello")
  // do something
});

ホバーの問題は、dataMapsがマウスオーバーイベントリスナーを登録していることです

.on('mouseover', function(info) {
  // do something else
});

したがって、上記を実行すると、dataMap のリスナーが自分のものに置き換えられます...したがって、ポップアップは表示されません。

代わりに、次のようにすることを考えることができます。

  popupTemplate: function(geo, data) {
      doSomethingOnHover();//call your mouse over function in the template
    return '<div class="hoverinfo">'+data.name+'<\div>';
  }

function doSomethingOnHover(){
    console.log("Hovering");
}

編集

データマップが描画されるコンテナにマウスイベントを追加できます

d3.selectAll('.datamaps-bubble').on('click', function(info) {
  console.log("hello")
  // do something
});
//container is the div on which the data map is made.
d3.selectAll('#container').on('mouseout', function(info) {
  console.log("out")
  // do something
});
d3.selectAll('#container').on('mouseover', function(info) {
  console.log("enteredasdasd")
  // do something
});

編集

以下のように、バブル データと、どのバブルに出入りするかを取得できます。

d3.selectAll('#container').on('mouseout', function(info) {
  if (d3.event.target.tagName == "circle"){
   //since you want the bubble only
    console.log(d3.select(d3.event.target).data()[0],"out")
  }
});
d3.selectAll('#container').on('mouseover', function(info) {
  if (d3.event.target.tagName == "circle"){
    //since you want the bubble only
    console.log(d3.select(d3.event.target).data()[0],"over")
  }
});

ここでの作業コード。

于 2015-12-15T11:22:45.830 に答える