markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

TypeError: this.options.data is undefined when updating a choropleth #91

Closed StepTNT closed 10 years ago

StepTNT commented 10 years ago

I'm following the example on the readme but I get this error if I try to update a choropleth. Here's my code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../js-api/jquery-2.0.0.js"></script>
    <title></title>
</head>
<body>
<div id="map"></div>
<script src="../js-api/d3.v3.min.js"></script>
<script src="../js-api/topojson.v1.min.js"></script>
<script src="datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 70%; height: 600px;"></div>
<script>
    function drawMap() {
        map = {};
        changeStatus(0); // Default state
    }
    ;

    function changeStatus(status) {
        switch (status) {
            case 0 :
            {
                setStatus0();
                break;
            }
            case 1:
            {
                setStatus1();
                break;
            }
            case 2:
            {
                setStatus2();
                break;
            }
        }
    }

    function setStatus0() {
        map = new Datamap({
            element: document.getElementById('container'),
            fills: {
                HIGH: '#afafaf',
                LOW: '#123456',
                MEDIUM: 'blue',
                UNKNOWN: 'rgb(0,0,0)',
                defaultFill: 'grey'
            },
            setProjection: function (element, options) {
                var projection, path;
                projection = d3.geo.mercator().scale(150).translate([element.offsetWidth / 2, element.offsetHeight / 1.5]);
                path = d3.geo.path().projection(projection);
                return {path: path, projection: projection};
            }
        });
    }

    function setStatus1() {
        map.updateChoropleth({
            USA: {fillKey: 'LOW'},
            CAN: '#0fa0fa'
        });
    }

    drawMap();
</script>
</body>
</html>

If I write changeStatus(1) in Firefox's console, it gives this output:

TypeError: this.options.data is undefined

markmarkoh commented 10 years ago

This is a bug, I believe you can fix it temporarily by adding a data: {} in the original options set. Can you give that a shot and see if it fixes it for you?

StepTNT commented 10 years ago

It works now, thanks :)