d3.js - svg要素のクリックを呼び出すjasmineテスト

Question

d3.jsライブラリを使用している角型アプリケーションでチャート指示文があります。ディレクティブの

パートがとても

svg.selectAll('g rect') 
    .on('click', function(d) { 
     scope.clickHandler(d, scope.data); 
    }) 
    .on('mouseover', function() { 
     d3.select(this).classed('data-item-hover', true); 
    }) 
    .on('mouseout', function() { 
     d3.select(this).classed('data-item-hover', false); 
    }); 

のようないくつかのSVG要素にマウスイベントハンドラを追加し、私はいくつかのユニットテストではこれらのハンドラをカバーしたいが、実際に動的にこれらのイベントを起動する方法に苦しんでいます。

私は、しかし、これは私がこのSO How to invoke "click" event programmatically in d3?出くわしと第二の答えは、この技術を試しに私を導いたものであるエラー

TypeError: undefined is not a constructor (evaluating 'rect.on('click')'

を投げる私のテスト仕様

describe('scope.clickHandler', function() { 
    var rect; 
    beforeEach(function(){ 
     spyOn(scope, 'clickHandler'); 
     rect = svg.select('g rect')[0][0]; 
     rect.on('click')(); 
    }); 
    it('should call scope.render after a window resize event occurs', function() { 
     expect(scope.clickHandler).toHaveBeenCalled(); 
    }); 
}); 

でこれをしようとしています。

d3.jsでイベントを登録したsvg要素でマウスイベントを呼び出すにはどうすればよいですか？

おかげ

Answer 1

主な問題は、あなたがundefinedエラーを取得する理由です、svg.select('g rect')[0][0]はDOM要素ではなく、適切D3の選択であるということです。

Selections are arrays of elements—literally (maybe not literally...). D3 binds additional methods to the array so that you can apply operators to the selected elements...

あなたが実際にDOM要素がElementインタフェースを実装しているためかどうかを確認することができます：ドキュメントから

(svg.select('g rect')[0][0] instanceof Element) // true 

だから、特定の要素のいくつかのイベントをトリガするためには、次の操作を実行できます。

var rect = svg.select('g rect') // first rect element found is assumed 
rect.on('click').call(rect.node(), rect.datum()); // as commented in above link 

簡単な作業フィールhereを見つけることができます。