CODEWITHSUNDEEP
javascriptjqueryd3.js
ValarDohaeris
ValarDohaeris

Reputation: 649

City dots are coming behind world map in World City Map in d3

I am trying to create a world map in d3. The map should show data related to different-different cities. Cities are marked on the map using red filled circles.

I am able to achieve most of it.Only challenge I am facing is city dot(red circles) are coming behind the map.I can see them in inspect element in firefox but they not visible as they are printed behind the map.

I read in a blog about this problem that I should load the city data inside loading method for world data. I did it but no help so far.Here is my code-

var columns = [];
    var measureArray = [];
    columns.push("city");
    measureArray.push("Room Revenue");

    var maxMap = {};
    var minMap = {};
    for (var num = 0; num < measureArray.length; num++) {
        var measureData = [];
        for (var key in data) {
            measureData.push(data[key][measureArray[num]]);
        }
        maxMap[measureArray[num]] = Math.max.apply(Math, measureData);
        minMap[measureArray[num]] = Math.min.apply(Math, measureData);
    }
    parent.$("#maxMap").val(JSON.stringify(maxMap));
    parent.$("#minMap").val(JSON.stringify(minMap));


    var width = $(window).width()-170;
    var height = $(window).height();
    var projection = d3.geo.mercator();
    //            .center([-20, 60])
    //            .scale(150);
    var path = d3.geo.path()
    .projection(projection);

    var svg = d3.select("#"+divID)
    .append("svg")
    .attr("width", width)
    .attr("height", height);

    var g = svg.append("g");

    var colorMap = {};
    var ctxPath=$("#ctxpath").val();

    d3.json(ctxPath+"/JS/world-topo-min.json", function(error, world) {
        var data = [
        {
            "city": "ZANZIBAR",
            "Room Revenue": "1000",
            "lat":"-6.13",
            "lon":"39.31"
        },
        {
            "city": "TOKYO",
            "Room Revenue": "900",
            "lat":"35.68",
            "lon":"139.76"
        },
        {
            "city": "AUCKLAND",
            "Room Revenue": "1500",
            "lat":"-36.85",
            "lon":"174.78"
        },
        {
            "city": "BANGKOK",
            "Room Revenue": "2500",
            "lat":"13.75",
            "lon":"100.48"
        },
        {
            "city": "DELHI",
            "Room Revenue": "2500",
            "lat":"29.01",
            "lon":"77.38"
        }
        ];

        g.selectAll("circle")
        .data(data)
        .enter()
        .append("a")
        .attr("xlink:href", function(d) {
            return "https://www.google.com/search?q="+d.city;
        }
        )
        .append("circle")
        .attr("cx", function(d) {
            return projection([d.lon, d.lat])[0];
        })
        .attr("cy", function(d) {
            return projection([d.lon, d.lat])[1];
        })
        .attr("r", 5)
        .style("fill", "red");
        g.selectAll("path")
        .data(topojson.feature(world, world.objects.countries).features)
        //          .geometries)
        .enter()
        .append("path")
        .attr("d", path)
        .style("fill", function(d, i) {
            return "white";
        });
        parent.$("#colorMap").val(JSON.stringify(colorMap));
    })


    var zoom = d3.behavior.zoom()
    .on("zoom", function() {
        g.attr("transform", "translate(" +
            d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")");
        g.selectAll("path")
        .attr("d", path.projection(projection));
    });
    svg.call(zoom);
    d3.select(self.frameElement).style("height", height + "px");

Any help is appreciated ,Thanx

Upvotes: 0

Views: 360

Answers (1)

Gilsha
Gilsha

Reputation: 14589

Seems like the dom elements for circles are behind the path elements. You will just need to change the order of appending elements to the documents. First append the paths for plotting map and then the dots.

 g.selectAll("path") //Appending paths first
     .data(topojson.feature(world, world.objects.countries).features)
     .enter()
     .append("path")
     .attr("d", path)
     .style("fill", function(d, i) {
          return "white";
     });

g.selectAll("circle")  //Now appending circles
    .data(data)
    .enter()
    .append("a")
    .attr("xlink:href", function(d) {
        return "https://www.google.com/search?q="+d.city;
    }
    )
    .append("circle")
    .attr("cx", function(d) {
        return projection([d.lon, d.lat])[0];
    })
    .attr("cy", function(d) {
        return projection([d.lon, d.lat])[1];
    })
    .attr("r", 5)
    .style("fill", "red");

Upvotes: 2

Related Questions