0

I experimenting with d3.js and how to implement the framework.

At this stage of experimental implementation, I would like to make the filled Countries create alerts when I click them.

The ultimate goal is to change the alert to a page re-route, using the country name to decide which page it gets routed to.

In depth explanations are greatly appreciated.

Here is the code:

 var map = new Datamap({
    element: document.getElementById('container'),
    fills: {
        PARTS:'green',
        defaultFill: 'black'
    },
    data: {
        USA: {
            fillKey: 'PARTS'

        },
        IRL: {
            fillKey: 'PARTS',
        }
    },
    done: function(datamap) {
        datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography, data) {
           if(data.fillKey=='PARTS'){
            alert(geography.properties.name);
           }

        });
    }
});
mapage2
  • 96
  • 1
  • 11
  • Your code seems to do what you want already. Are you saying that this is not working? In what way? – Lars Kotthoff Jul 25 '14 at 08:23
  • @LarsKotthoff for some reason when I click the filled countries the alert does not show. Am I using the variable correctly to properly access the fillKey property? – mapage2 Jul 25 '14 at 16:37
  • Probably not then. Could you post a complete example please? – Lars Kotthoff Jul 25 '14 at 16:56
  • @LarsKotthoff what tool should I use to post it? or do you just want me to put all the code on here? – mapage2 Jul 25 '14 at 17:02
  • Whatever you prefer. The main thing is that we can reproduce the error. – Lars Kotthoff Jul 25 '14 at 17:05
  • @LarsKotthoff http://jsfiddle.net/mapage2/sPKF7/ – mapage2 Jul 25 '14 at 17:25
  • It seems like `fillKey` isn't added to the data, so you have to check the ID: http://jsfiddle.net/sPKF7/2/ – Lars Kotthoff Jul 25 '14 at 17:40
  • @LarsKotthoff Great! Progression. However, this will be a conflict when I implement the rest of code. In the end, this map will have a lot of countries. I was thinking of maybe initializing another array with all the shaded country's name and have a for loop to check. Also you have any insight on the the 2nd part of the part problem where instead of the alert, clicking on the region sends you to another page? – mapage2 Jul 25 '14 at 17:51
  • Your approach sounds certainly feasible. For the redirect, see e.g. http://stackoverflow.com/questions/4744751/javascript-redirect – Lars Kotthoff Jul 25 '14 at 18:33

0 Answers0