web-dev-qa-db-ja.com

d3でプログラムで「クリック」イベントを呼び出す方法

私はそのようにしようとしています（ https://Gist.github.com/1703994 ）：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.27.2"></script>

    <script type="text/javascript" src="js-libs/jquery-1.7.js"></script>

    <style>
      <!--
      #test {
      width: 400px;
      height: 500px;
      }
      -->
    </style>
  </head>

  <body>

    <script type="text/javascript">
      $(function() {
        var w = 600,
            h = 350;

        var vis = d3.select("#test").append("svg:svg")
        .attr("width", w)
        .attr("height", h)
        .append("svg:g")
        .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

        var g = vis.selectAll("g")
        .data([ { x:1 , y: 2} ])
        .enter().append("svg:g");

        g.append("svg:path")
        .attr("fill", "red")
        .attr("stroke", "red")
        .attr("stroke-width", "10")
        .attr("d", "M 100 350 l 150 -300")

        g.select("path")
        .on("click", function() { console.log("Hello"); });

        // XXX: how to execute click programmaticaly?
      })
    </script>

    <div id="test"></div>
  </body>
</html>

しかし、動作しません

使用できると思います https://github.com/mbostock/d3/wiki/Internals#wiki-dispatch_on

しかし、それを行う方法は？

javascriptd3.js
56
mad

理由はわかりませんが、jQueryがクリックイベント$("#some-d3-element").click()をd3要素にディスパッチしないようにするイベントをjQueryとd3が処理する方法に矛盾があるようです。

回避策：

jQuery.fn.d3Click = function () {
  this.each(function (i, e) {
    var evt = new MouseEvent("click");
    e.dispatchEvent(evt);
  });
};

そしてそれを呼び出す：

$("#some-d3-element").d3Click();
83
handler

単に.onメソッドを登録値（つまり、ハンドラー関数）の取得メソッドとして使用し、その結果を呼び出します。

g.select("path").on("click")();

ハンドラーがバインドされたデータやイベントフィールドを使用する場合、または複数のイベントリスナーがバインドされている場合（「click.thing1」や「click.thing2」など）は、少し複雑になります。その場合、おそらく 標準DOMメソッド を使用して偽のイベントを起動するのが最善です。

var e = document.createEvent('UIEvents');
e.initUIEvent('click', true, true, /* ... */);
g.select("path").node().dispatchEvent(e);
68
natevw

D3 v4を使用すると、おそらくこれが必要になります。

d3.select('#some-id').dispatch('click');

参照： https://github.com/d3/d3-selection#selection_dispatch

15
Jonatas Walker

これは動作します。私は円グラフを使用しているので、すべての「選択された」円スライスを選択し、それぞれについて、添付の「クリック」コールバック（ここに含まれていないコードの別の部分にd3を使用して添付します）を取得しますon（）メソッド）そして、正しいコンテキストで期待されるパラメーターで呼び出します。

d3.selectAll("g.selected").each(function(d, i) {
    var onClickFunc = d3.select(this).on("click");
    onClickFunc.apply(this, [d, i]);
});
14
Andrew Plank

angular単体テストのためのd3 mousemoveイベントを探しているこのスレッドに来ました。

@natevw回答

g.select("path").on("click")();

mouseoverイベントで大いに役立ちました。しかし、それをmousemoveに適用すると、e.source nullエラーが発生しました。

回避策は、d3イベントをプログラムで設定することでした。

d3.event = document.createEvent('MouseEvent');
d3.event.initMouseEvent("mousemove");
d3.select(Elm[0]).select("rect").on("mousemove")();

お役に立てれば。

4
massanishi

JQuery $（mySvgElement）.trigger（ "click"）は機能しないので、この答えはやや無関係かもしれませんが、SVG要素のクリックイベントを呼び出す方法を探している人にとっては便利です。

これは、SVG要素のクリックイベントをプログラムでトリガー/呼び出し/発生させる方法です。

var ev = document.createEvent("SVGEvents");
ev.initEvent("click",true,true);

var target = $("svg>g>path[fill='#0011cc']").get(0); // get the SVG element here
target.dispatchEvent(ev);  // like $(target).trigger('click') - but working!
3
Fredrik Johansson

マウスイベントを取得し、d3が提供する引数を渡すことにより、スーパーマニュアルを作成できます。これにより、d3コンストラクトを引き続き使用しながら、かなりクリーンな方法を実行できます。単一の要素の場合、次を使用します。

_var path = g.select('path');
path.on('click').call(path.node(), path.datum());
_

複数の要素の場合、各要素を順番にトリガーできます。

_g.selectAll('path').each(function(d, i) {
  d3.select(this).on('click').apply(this, arguments);
});
_

後者は、セレクターが十分に具体的である場合、または.select()の代わりに.selectAll()を使用して最初の要素のみを返す場合、単一の要素に使用することもできます。

1
Yony

@handlerの答えは私には完全に機能しませんでした。 svg要素をクリックしますが、追加のシミュレートされたイベントは登録されません。これは私のために働いたものです：

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

使用法：

eventFire(document.getElementById(element_id), 'click');
0
Cybernetic