btmills / react-datamaps

React component for D3 DataMaps
MIT License
31 stars 22 forks source link

Bubble Click Handler #8

Closed atareshawty closed 8 years ago

atareshawty commented 8 years ago

What do you think about adding a click event to the map bubbles? It could make the map a lot more interactive this way. If you want, I'll make a PR

btmills commented 8 years ago

Summarizing a discussion @atareshawty and I had offline: The goal here is to translate the existing DataMaps API to React as closely as possible. While click handlers for bubbles are useful, that falls more toward extending the DataMaps with new functionality, so it's better for that to live outside the React translation layer. Here's an example of how you'd accomplish this today, based on this StackOverflow answer:

import React from 'react';
import Datamap from 'react-datamaps';

export default component CoolMap extends React.Component {

    addClickHandlers = (ref) => {
        if (ref && ref.map) {
            ref.map.svg.selectAll('.datamaps-bubble').on('click', (bubble) => {
                console.log(`You clicked on ${bubble.name}`);
            });
        }
    };

    render() {
        return (
            <Datamap
                ref={this.addClickHandlers}
                bubbles={[/*...*/]}
            />
        );
    }

}