CODEWITHSUNDEEP
javascriptcssd3.js
Noobster
Noobster

Reputation: 1044

Cannot hide cities behind spinning globe

I have put together a jsfiddle where I implement a Bostock spinning globe.

I then try to plot a couple of markers (cities). This is only partly successful. For some reason not all are plotted -and, I assume for a similar reason- the script that is meant to hide those invisible cities (i.e. behind the globe)is not working as it should. The markers are still dancing around uninvitedly when you scroll them out of sight.

I have put together the following fiddle: http://jsfiddle.net/Guill84/jg3axLmx/1/

The below is the script that is meant to 'hide' the markers behind the globe:

function position_cities() {
   var centerPos = projection.invert([380,380]);
   var arc = d3.geo.greatArc();
   svg.selectAll(".cities")
     .style("fill", "blue")
     .attr("cx", function(d) {
       return projection([d.lon, d.lat])[0];
     })
     .attr("cy", function(d) {
       return projection([d.lon, d.lat])[1];
     })
     .style({
       "color": "#FFF",
       "display": function(d) { 
         var x = projection([d.lon, d.lat])[0];
         var y = projection([d.lon, d.lat])[1];
         var d = arc.distance({
           source: [d.lat, d.lon],
           target: centerPos
         });
         return (d > 1.57) ? 'none' : 'inline';
       }
     });
 }

Additionally - would you know how to add labels to these markers, and make them square instead of circular?

The question above is similar to this: Cannot hide labels 'behind' spinning D3 Globe

Here you can see a marker in Brazil that is still visible Here you can see a marker in Brazil that is still visible

Upvotes: 1

Views: 335

Answers (3)

Andrew Reid
Andrew Reid

Reputation: 38201

You almost have it,

as noted in the comments, the center point is at 400,400:

var centerPos = projection.invert([400,400]);

and you have mixed up the order latitude and longitude in the source coordinate here:

var d = arc.distance({source: [d.lat, d.lon], target: centerPos});
  return (d > 1.57) ? 'none' : 'inline';

This should read:

var d = arc.distance({source: [d.lon, d.lat], target: centerPos});
  return (d > 1.57) ? 'none' : 'inline';

fiddle: http://jsfiddle.net/L51y3c1b/

Upvotes: 1

Fabio
Fabio

Reputation: 11

In the js fiddle you provide you are setting the cities once but never calling them again. In your startAnimation method the same way you are updating the labels the cities display must be updated too. If not the display will depend on the first load.

As for the shape change you are defining it when you create them in here:

var cities = svg.selectAll("circle")
            .data([
            {"code":"RIO","city":"RIO DE JANEIRO","country":"BRAZIL","lat":-22.90,"lon":-43.24},
            {"code":"BSB","city":"BRASILIA","country":"BRAZIL","lat":-15.67,"lon":-47.43},
            {"code":"ZNZ","city":"ZANZIBAR","country":"TANZANIA","lat":-6.13,"lon":39.31},
            {"code":"TYO","city":"TOKYO","country":"JAPAN","lat":35.68,"lon":139.76}
            ])
            .enter()
            .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", 3)
            .style("fill", "red")
            .attr("d", path)
            .attr("class", "cities")
            .attr("id", function(d){ return d.code})

Those attributes such as cx, cy are related to an SVG circle shape along with the circle tag specified. To create new shapes you will need to change here to the tag and attributes relative to the shape you want.

Upvotes: 1

tarulen
tarulen

Reputation: 2100

I can answer the sub-question:

Additionally - would you know how to add labels to these markers, and make them square instead of circular?

Line 72, instead of doing this:

      .append("circle")
        .attr("cx", function(d) {
           return projection([d.lon, d.lat])[0];
           })
        .attr("cy", function(d) {
           return projection([d.lon, d.lat])[1];
           })

append a "g" element instead:

      .append("g")
        .attr("transform", function(d) {
           return "translate("+ 
                    projection([d.lon, d.lat])[0] +
                    "," +
                    projection([d.lon, d.lat])[1]+
                    ")";
           })

Then 

     cities.append("circle") 
           .attr("cx", 0)
           .attr("cy", 0)

and 

    cities.append("text").text("New York");

You can fiddle with the x and y coordinates of the text. Also, everytime you used to change the cx and cy attribute of a city, you need to change the "transform" attribute of the g element instead (as I've shown above).

As for your main question, the best clue I can give is that d3.geo.greatArc(); is deprecated, so maybe you should look for a new method for computing arc distance on the globe.

Upvotes: 1

Related Questions