1

I'm trying to understand why this code doesn't work for version 7 of d3.js. It's working for version 4

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<!-- <script src="https://d3js.org/d3.v4.js"></script> -->
<script src="https://d3js.org/d3.v7.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="400" height="300"></svg>

<script>
    // The svg
    var svg = d3.select("svg")
        width = +svg.attr("width"),
        height = +svg.attr("height");
    
    // Map and projection - centraliza em bangkok
    //var projection = d3.geoNaturalEarth1()
    var projection = d3.geoMercator()
        .scale(width / 1.3 / Math.PI)
        .translate([width / 2, height / 2])
        //.center([100, 13])
        //.rotate([0., 0])
        //.parallels([0, 0])
        //.scale(800)
        //.translate([width / 2, height / 2]);

    
    // Load external data and boot
    //d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){
    d3.json("world.geojson", function(data){
        // Draw the map
        svg.append("g")
            .selectAll("path")
            .data(data.features)
            .enter().append("path")
                .attr("fill", "#69b3a2")
                .attr("d", d3.geoPath()
                    .projection(projection)
                )
                .style("stroke", "#fff")
    })
</script>
Andy
  • 61,948
  • 13
  • 68
  • 95
Gustavo Luizon
  • 11
  • 1
  • What debugging have you done? What errors are you getting? Have you checked the documentation for upgrading from v4 to v7 to see what's changed? – Andy Apr 25 '22 at 00:11
  • Look at the link on the top (*This question already has answers here*), it explains how to use `d3.json` with `then()`. – Gerardo Furtado Apr 25 '22 at 01:25

0 Answers0