Registering click handlers

[itay]

Registering click handlers

[jasondavies]

How about selecting elements after creating the chart, and adding the handlers there. Does that not work for you?

[itay]

What should be the argument to the select? i.e. what nodes/classes should we select on and then bind?

I guess my higher level thought is that since parsets wraps the entire rendering, then it should provide these methods, in order to not break them in the future (e.g. if you changed the internal implementation). However, if you have something else in mind, that might be better.

[jasondavies]

I guess the classes and elements generated by the chart are also part of the API, so “post-selection” is a reasonable way to customise the output further. A similar approach is taken by D3’s components, such as d3.svg.brush and d3.svg.axis; you can customise elements or add event handlers after generating the initial elements.

For d3-parsets, which elements you should select depends on your usage scenario; there should be suitable classes on most elements that you can find by inspecting your chart in a browser, or examining the code. If you think they could be improved, do let me know!

[itay]

Sounds good to me - I'll reopen this if you ever change the inner DOM structure :)

Thanks, awesome work.

[jasondavies]

By the way, I just noticed that not all of my event listeners were namespaced, so I’ve just pushed a fix.

[itay]

By the way, for those curious about how to do this, here is our code that gets the event and then generates a new one with a different structure (graph is our root svg):

        graph.selectAll("g.ribbon-mouse path")
            .on("click", function(e) {
                that.trigger('click', {
                    source: e.source.node.name,
                    sourceDimension: e.source.node.dimension.name,
                    target: e.target.node.name,
                    targetDimension: e.target.node.dimension.name,
                    dimension: e.dimension,
                    value: e.count
                });
            });