web-dev-qa-db-ja.com

D3チャートの背景に「onclick」イベントを添付

D3ヒストグラムチャートがあり、その上に「onclick」イベントをバーに添付しています。

...
var bar = svg.selectAll(".bar")
        .data(data)
        .enter().append("g")
        .attr("class", "bar")
        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
        .on('click', function(d,i){ //do stuff  });
...

これは予想どおりに機能します。また、チャートの背景に「onclick」イベントを添付したいと思います（つまり、チャート内のバーではないすべての場所）が、これに問題があります。私はいくつかの方法でイベントを添付しようとしましたが、どの場合でも、この新しいイベントは私のバークリックをオーバーライドするようです：

いくつかの試み：

$("svg:not('.bar')").on("click", function(){ //do stuff });

$("g:not('.bar')").on("click", function(){ //do stuff });

var svg = d3.select("#histogram_block").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .on("click", function(d,i){
            if (d) { //do stuff}
            else { //do stuff }
        };

SVGオブジェクトが初期化されたときにイベントハンドラーを追加する方法があると仮定していますが、これを行う正しい方法がわかりません。

javascriptjqueryd3.js
49
woemler

イベントは実際にはオーバーライドされませんが、両方がトリガーされます。SVGおよびバーのonclickハンドラーです。これを防ぐには、.stopPropagation()メソッドを使用します（ ドキュメント を参照）。コードは次のようになります。

rect.on("click", function() {
  console.log("rect");
  d3.event.stopPropagation();
});

完全な例 here 。イベントの伝播を停止する動作と比較してください here 。

59
Lars Kotthoff

この例では（行246： http://tributary.io/inlet/8361294 ）グラフの総面積に等しい幅と高さの新しい長方形を追加し、マウスを接続（またはクリック）しますイベント。

svg.append("rect")
        .attr({"class": "overlay" , "width": width , "height": height})
        .on({
          "mouseover": function() { /* do stuff */ },
          "mouseout":  function() { /* do stuff */ }, 
          "click":  function() { /* do stuff */ }, 
        });
1
DeBraid