d3.js - 茉莉花测试来调用 svg 元素的点击答案

【问题标题】：d3.js - jasmine test to invoke a click on an svg elementd3.js - 茉莉花测试来调用 svg 元素的点击
【发布时间】：2016-07-18 18:08:08
【问题描述】：

我的 Angular 应用程序中有一个使用 d3.js 库的图表指令。

部分指令将鼠标事件处理程序添加到一些 svg 元素中

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);
    });

我想在一些单元测试中介绍这些处理程序，但我正在为如何实际动态调用这些事件而苦恼。

我正在我的测试规范中尝试这样做

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();
    });
});

但是这会引发错误

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

我遇到了这个 SO How to invoke "click" event programmatically in d3?，第二个答案是促使我尝试这种技术的原因。

如何在 d3.js 中注册事件的 svg 元素上调用鼠标事件？

谢谢

【问题讨论】：

见stackoverflow.com/questions/9063383/…
这是我在问题底部引用的确切链接
我的错 :) 我只能看到一个细微的区别：svg.select('g rect')[0][0] 是一个 DOM 元素，而 d3 将方法绑定到选择数组本身，因此出现错误

标签： angularjs d3.js svg

【解决方案1】：

主要问题是 svg.select('g rect')[0][0] 是一个 DOM 元素而不是正确的 D3 选择，这就是您收到 undefined 错误的原因。来自文档：

选择是元素的数组——字面意思（也许不是字面意思......）。 D3 将其他方法绑定到数组，以便您可以应用选定元素的运算符...

您实际上可以检查一下，因为 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。

【讨论】：