将d3升级到v5后，topojson映射颠倒

Question

我使用topojson文件和d3 here

创建了邮政编码映射的简单扩展

可以看到我的工作版本here

我正在尝试将其更新为使用d3js v5，无论我做什么，地图都将颠倒过来。请在下面和here上查看我的无效版本：

有关如何解决此问题的任何建议？

我在stackoverflow上看到了其他答案，但它们似乎都与创建topojson文件有关。我在两种解决方案中都使用了相同的topojson文件，但是其中一种倒置，而另一种则没有。

    <script src="https://d3js.org/d3.v5.js"></script>
    <script src="https://d3js.org/topojson.v3.js"></script>
    <script type="text/javascript" src="https://agiledragonconsulting.com/js/svg-pan-zoom.js"></script>
<div id="button">
     <a href="#" onclick="changeColor(); return false;">Change    color</a>&nbsp;&nbsp;<a href="#" onclick="getZipZoom(); return false;">Get zoom</a>
</div>
    <script>
    var buttonheightceil = Math.ceil(document.getElementById("button").getBoundingClientRect().height);

    var width = document.documentElement.clientWidth - 8;
    var height = document.documentElement.clientHeight - buttonheightceil - 20;
    console.log("width = "+width+", height = "+height);
    var path = d3.geoPath();

    var svg = d3.select("body").append("svg")
        .attr("id","map")
        .attr("width", width)
        .attr("height", height);

    var promises = d3.json("https://gist.githubusercontent.com/jefffriesen/6892860/raw/e1f82336dde8de0539a7bac7b8bc60a23d0ad788/zips_us_topo.json");

    console.log("before promises");

    promises.then(ready);

    function ready(us) {
        svg.append("g")
            .attr("class", "counties")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.zip_codes_for_the_usa).features)
            .enter().append("path")
            .attr("class", "zip")
            .attr("id", function(d) {return d.properties.zip; })
            .attr("data-zip", function(d) {return d.properties.zip; })
            .attr("data-state", function(d) {return d.properties.state; })
            .attr("data-name", function(d) {return d.properties.name; })
            .attr("stroke","#383838")
            .attr("stroke-width",".1px")
            .attr("fill","none")
            .attr("d", path)

        var panZoom = svgPanZoom('#map', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            minZoom: 0.1,
            maxZoom: 100,
            fit: true,
            contain: true,
            center: true
        });
    }
    function getZipZoom() {
        var panZoom = svgPanZoom('#map');
        var thisZoom = panZoom.getZoom();
        console.log("");
        console.log(thisZoom);
    }
    function changeColor() {
        var thisZip = "00014";
        var x = document.getElementsByClassName("zip");
        console.log("");
        console.log("setting color.  x.length = "+x.length);
        for (let i = 0; i < x.length; i++) {
            if(x[i].getAttribute("id")===thisZip){
                x[i].setAttribute("stroke","#ff0000");
                x[i].parentElement.appendChild(x[i]);
                break;
            }
        }
    }

我希望看到像这样的one

的美国右侧地图。