D3.js shows nothing on the screen

Question

D3.js shows nothing on the screen

Navigation

#1 by (1 votes)

1

I'm trying to use D3.js but I can not. I have the code below, but it does not print the map of Brazil. The screen does not show any errors, what could it be? my file "meso.json" is in topojSON format but it transforms the topojSON into GeoJson already in the d3.js code:

<html>
    <head>
        <title>D3.js</title>
        <meta charset="utf-8" />
        <script src="http://d3js.org/d3.v3.min.js"></script><scriptsrc="http://d3js.org/queue.v1.min.js"></script>
        <script src="http://d3js.org/topojson.v1.min.js"></script><script>varwidth=900,height=650;varsvg=d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

            var projection = d3.geo.mercator()
            .center([55,10])
            .scale(750);

            var path = d3.geo.path()
            .projection(projection);

            queue()
            .defer(d3.json, "topo/meso.json")
            .await(ready);

            function ready(error, br_mesos){

                if(error) return console.error(error);

                var mesos = topojson.feature(br_mesos, br_mesos.objects.meso);

                svg.append("path")
                .datum(mesos)
                .attr('d', path)
                .attr('class', 'mesos');

            }
        </script>
    </head>

    <body>
    </body>
</html>

javascript mapas d3.js

asked by anonymous 30.11.2016 / 18:32

1 answer

change div text with jquery How to fill an EditorFor as the username of the logged in user

score 1 · Accepted Answer

If "meso.json" only contains the map of Brazil, it is likely that it is appearing yes, but outside the viewing area.

By the geographic coordinates you are using (latitude 10, longitude 55) the center is in the northern and eastern hemisphere (probably Africa, Asia, India or somewhere in the middle of the Indian Ocean. -34 and longitudes -34 to -74 and so should not be appearing on the map.

To verify this, reduce the scale to 150 (which fits the whole world) and see if the map appears.

I imagine you should have switched signals, as [-55, -10] (instead of [55,10]) is a good center for the map of Brazil.

Switch by .center([-55,-10]) and see if the map appears.

I've played your code on a [JSFiddle] [ link where you can experiment with a world map, and then swap the map you are using. I've commented your code in two places to use this example.