Search code examples
javascriptd3.jsevent-handlingradio-buttontooltip

d3.js - Change value for Tooltip with radio button

I am creating a heatmap for Ukraine with some economic indicators.

The Map

Depending on what radio-button is checked, a different colorscale is used to visualize the different values/indicators.

        d3.selectAll('.radio').on('change', function(){

            if (document.getElementById('none').checked) {

                            areas.transition().duration(250)
                                 .attr('fill','steelblue');}

            else if (document.getElementById('agr').checked) {

                            areas.transition().duration(250)
                                 .attr('fill', function(d){return colorScaleagr(d.properties.agricindx)});}
.... and so on.

Right now the tooltip (div) only shows the name of the region that is hovered over. I'd like to display also the value for the region, corresponding to the indicator that is selected at the moment. The tooltip's content (the name) is determined within an event-handler of the path/map element.

var areas = group.append('path')
                    .attr('d',path)
                    .attr('class', function(d) { return "subunit" + d.id; })
                    .attr('fill','steelblue')
                    .attr('stroke', 'white')
                    .attr('stroke-width', '1px')
                    .attr('opacity','0.8')
                                                       // Hover & Tooltip
                    .on("mouseover", function(d) {
                        d3.select(this).transition().duration(200).style("opacity", 1);
                        div.transition().duration(300).style("opacity", 1)                          
                        div.html(d.properties.name )
                           .style("left", (d3.mouse(this)[0] + 330)  + "px")
                           .style("top", (d3.mouse(this)[1] + 15)  + "px");
                        })

                    .on("mousemove", function(d) {                                                  
                        div.html(d.properties.name)
                           .style("left", (d3.mouse(this)[0] + 350) + "px")
                           .style("top", (d3.mouse(this)[1] + 25)  + "px");

                        })  

                    .on("mouseout", function(d) {
                        d3.select(this).transition().duration(200).style("opacity", 0.8);                           
                        div.transition().duration(300).style("opacity", 0)                          
                        });

So my question now is: How can i take into account the status of the radio-button, whithin the path-element (area) , since the data for the single entities (regions) is stored there. If I try to manipulate the tooltip within the radio-buttion selection, the data is not available to me. I hope I made myself understand :). I appreciate any help.

Solution

  • I think I understand what you are trying to do so here's an attempt of what I would do:

    1. format you data as an object with key/value pairs as follow: 'none': 10, 'agr': 4, etc...
    2. Store the key from the different radio buttons as a global variable that you update on the radio change function.
    3. When creating your tooltip on the mouseover function, print the correct value by calling d[key], i.e. d['agr'].

    Hope that helps!