javascript - 使用 RxJS 进行 D3 选择事件

Question

我正在尝试从 d3“输入”选择中获取 Observable。我找不到正确的方法。

例如，对于以下选择:

selection
    .attr("class", "node")
    .attr('id', (d) => d.id)

如果选择是一个 Enter() 选择，我希望将单击事件作为可观察的。我怎样才能做到这一点？

我尝试使用 fromEvent

const clickStream = Rx.Observable.fromEvent(selection[0], 'click')

这看起来应该可以工作，因为选择[0]是一个 DOM 节点数组(对吗？)。

那么我怎样才能让这一切顺利进行呢？

Answer 1

来自 Rx.Observable.fromEvent 的文档:

The DOMElement, NodeList, jQuery element, Zepto Element, Angular element, Ember.js element or EventEmitter to attach a listener.

问题是 selector[0]我们从 d3 选择中得到的都不是这些。它只是一个包含节点的常规数组，这让 RxJS 感到困惑。

解决方案1

而不是将 d3 选择对象传递给 Rx.Observable.fromEvent ，您可以使用返回 RxJS 可以处理的内容重新选择节点，例如使用 jQuery 或 document.querySelectorAll('.node') .

解决方案2

或者，您可以循环遍历数组中的节点并将它们一一传递给 RxJS。

function d3EventObservable(selection, event) {
    //Start with an observable that will never emit
    var obs = Rx.Observable.never();
    selection.each(function() {
        //Create observables from each of the elements
        var events = Rx.Observable.fromEvent(this, event);
        //Merge the observables into one
        obs = obs.merge(events);
    });
    return obs;
}

const clickStream = d3EventObservable(selector, 'click');