0

I'm new to d3.js.

I want to draw many circles in each city portion of the map.

I have tried to fetch data from an API and it work.

However, it doesn't display the circles on each city without giving me any error.

Here is my script.js code:

     //Define path generator
  var path = d3.geo.path().projection(projection);

  //Group SVG elements together
  var features = svg.append("g");

 //Load TopoJSON data
    d3.json("Lebanon_Level2.json", function (error, syr) {

     if (error) return console.error(error);
    var subunits = topojson.feature(syr, syr.objects.gadm36_LBN_2);

      // Bind data and create one path per TopoJSON feature
      features.selectAll("path")
   .data(topojson.feature(syr, syr.objects.gadm36_LBN_2).features)
   .enter()
  .append("path")
  .attr("d", path)
  .attr("fill", "#e8d8c3")

    });

Fetch API data in d3.js

 d3.json('https://localhost/API/covidinfo/read.php',function(data) 
     {
      var location = data.records;
      console.log(location);
    
      features.selectAll('circle')
            .data(location)
            .enter()
            .append('circle')
            
            .attr('cx',function(d){
                location.map(d=>{
                    return projection([d.lng,d.lat])[0];
                })
            })
            .attr('cy',function(d){
                location.map(d=>{
                    return projection([d.lng,d.lat])[1];
                })
            })
            .attr("r", 15)
            .style("fill", "red")
            .style("opacity", 0.75);
            
  });

Output: Circle appears on the left side of the map

API data API data output

user14674901
  • 27
  • 6
  • It appears you are passing latitude and longitude in the wrong order, see [here](https://stackoverflow.com/a/49281585/7106086). – Andrew Reid Sep 09 '21 at 07:13
  • @AndrewReid I've edited this part in my code by adding map function in order to read the property lat and lng from the API and the circles appear at the left side of the page and not on the map. Any help please – user14674901 Sep 09 '21 at 18:21
  • It would help if you show how you draw the geojaon/topojson. – Andrew Reid Sep 09 '21 at 18:29
  • At a complete guess, your lat / long are returned as strings, and they need to be numbers - it looks like the projection returns zeroes. (Try +d.lat and +d.lng) – mgraham Sep 09 '21 at 19:10
  • @mgraham It doesn't work even if I add + sign – user14674901 Sep 10 '21 at 12:12
  • what about adding 'return' in front of location.map when setting cx and cy? Omitting that might explain zeroes getting set for cx and cy (or the null equivalent) – mgraham Sep 10 '21 at 13:08
  • @mgraham after adding return ,an error occurs on the console : Error: attribute cx: Expected length, "222.104162347699…". Error: attribute cy: Expected length, "-393.74294757781…". – user14674901 Sep 10 '21 at 14:50
  • Now try adding the '+' again in front of d.lat and d.lng in those functions as well – mgraham Sep 10 '21 at 15:44
  • @mgraham it seems that the projection of latitude and longitude are not working with the lat and lng of the API – user14674901 Sep 10 '21 at 17:34
  • What are you trying to attempt with location.map anyways? That would seem to be mapping the entire dataset for each and every point... do you not just need the 'return projection' statements inside the cx/cy attributes? If that doesn't work, and I think we've cleared up the obvious stuff, we'll need a running example to help further (jsfiddle) - I'm good on d3 but the geo stuff isn't something I've used a lot – mgraham Sep 10 '21 at 17:55
  • @mgraham from location.map I'm trying to access lat and lng data from the API – user14674901 Sep 10 '21 at 18:10
  • You've already added it at data(location) - now after enter() and append(circle), attr('cx', function(d)) will contain an individual datum from location, and it'll do that for each datum. D3 is confusing to start with! – mgraham Sep 10 '21 at 18:13

0 Answers0