D3グラフイベントリスナーの外のどこでも

Question

基本的には、ユーザが異なるSVGシェイプをクリックすることができるグラフがあり、そのようにすると.on('click')関数は色の塗りつぶしを変更します。しかし、ある時点では、グラフを元の状態に戻すオプションをユーザーに与えることが重要になります。グラフの外側のどこかをクリックすることで、グラフの座標面にない余白（余白、詰め物など）をクリックすることで、私のケースでこれを直感的に理解できます。

私はこの試みた：それはどんな効果を持っていなかった

d3.select('body').on('click', function() { 
    d3.selectAll('circle').style('fill', function(d) { 
     return d.color; 
    }) 
}); 

を。私は、私の上記の試みた私のd3.select('body').on('click')を無効にしている形のクリック効果に私の既存のことを推測しています。それか、私のアプローチは間違っているだけです。

ここでのご提案はすばらしいと思います。

また、私は.attr('fill')と.style('fill')がほとんど常に一貫していなければならないことを認識しています。私はここに.style('fill')が必要です。私は.attr('fill')だけでも安全にしようとしました。

Answer 1

あなたは

window.onclick = function(event){ 
      if(!(event.target.className.baseVal=="circleClass")){ 
       d3.selectAll('circle').style('fill', function(d) { 
     return d.color; 
    }) 
} 
    } 

ようなものを使用することができるかもしれません