Javascript D3：它没有'；t显示美国地图_Javascript_Dictionary_D3.js_Xampp_Show

Javascript D3：它没有'；t显示美国地图

javascript dictionary d3.js xampp

Javascript D3：它没有'；t显示美国地图,javascript,dictionary,d3.js,xampp,show,Javascript,Dictionary,D3.js,Xampp,Show,我的控制台中没有错误，我的xampp服务器已启动。我在浏览器中调用代码，代码应该是正确的路径。但是页面是白色的，没有显示美国地图。这些是我放在头上的脚本 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script> <script src="https://d3js.org/d3.v5.min.js"></script> &

我的控制台中没有错误，我的xampp服务器已启动。我在浏览器中调用代码，代码应该是正确的路径。但是页面是白色的，没有显示美国地图。这些是我放在头上的脚本

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="https://d3js.org/d3-queue.v2.min.js"></script>

这是我的代码，忽略注释的内容：

<head>

        .state{
            fill:none;
            stroke: #333;
            stroke-width: 1.0;
        }

        .county{
            fill:  #e3e3e3;
            stroke: #fff;
            stroke-width: 0.5;
        }
        </style>

</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
var margin = {top: 0, left: 0, right: 0, bottom: 0},
 height = 400 - margin.top - margin.bottom,
width = 800 - margin.left - margin.right;

var svg = d3.select("#map")
.append("svg")
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.queue()
.defer(d3.json, "us.json")
//.defer(d3.csv, "final_cleaned_wildlife_impacts.csv")
.await(ready);

var projection = d3.geoAlbersUsa()
.translate([width/2, height/2])
.scale(800);

var path = d3.geoPath()
.projection(projection);

function ready(error, data/*, airport*/){
    var counties = topojson.feature(data, data.objectes.counties).features;
    svg.selectAll(".county")
    .data(counties)
    .enter()
    .append("path")
    .attr("class", "county")
    .attr("d", path);
    var states = topojson.feature(data, data.objectes.states).features;

    svg.selectAll(".state")
    .data(states)
    .enter()
    .append("path")
    .attr("class", "state")
    .attr("d", path);
    /*
    svg.selectAll(".airport")
    .data(airports)
    .enter().append("circle")
    .attr("class", "airport")
    .attr("r", 2)
    .attr("cx", function(d){
        var coords = projection([d.long, d.lat])
        return coords[0]
    })
    .attr("cy", function(d){
        var coords = projection([d.long, d.lat])
        return coords[1]
    })
    .attr("opaciy", "0.25");
   */
}

        </script>
</body>


.州{
填充：无；
冲程：#333；
笔划宽度：1.0；
}
.县{
填充：#e3；
冲程：#fff；
笔画宽度：0.5；
}
var margin={top:0，left:0，right:0，bottom:0}，
高度=400-margin.top-margin.bottom，
宽度=800-margin.left-margin.right；
var svg=d3。选择（“映射”）
.append（“svg”）
.attr（“高度”，高度+边距。顶部+边距。底部）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
d3.队列（）
.defer（d3.json，“us.json”）
//.延迟（d3.csv，“最终清理的野生动物影响”的延迟）
.等待（准备好）；
var projection=d3.geoAlbersUsa（）
.translate（[宽度/2，高度/2]）
.比例尺（800）；
var path=d3.geoPath（）
.投影（投影）；
功能就绪（错误，数据/*，机场*/）{
var countries=topojson.feature（data，data.objectes.countries）.features；
svg.selectAll（“.country”）
.数据（县）
.输入（）
.append（“路径”）
.attr（“类”、“县”）
.attr（“d”，路径）；
var states=topojson.feature（data，data.objectes.states）.features；
svg.selectAll（“.state”）
.数据（国家）
.输入（）
.append（“路径”）
.attr（“类别”、“状态”）
.attr（“d”，路径）；
/*
svg.selectAll（“.airport”）
.数据（机场）
.enter（）.append（“圆”）
.attr（“类”、“机场”）
.attr（“r”，2）
.attr（“cx”，功能（d）{
var coords=投影（[d.long，d.lat]）
返回坐标[0]
})
.attr（“cy”，函数（d）{
var coords=投影（[d.long，d.lat]）
返回坐标[1]
})
.attr（“不透明”、“0.25”）；
*/
}

查看页面时，是否看到SVG或添加到DOM的任何路径？是否产生了任何错误？如果您没有看到添加到DOM的路径和错误，那么指向topojson的链接可能很有用。如果我转到inspector查看body标记，则可以看到SVG。没有生成任何错误。到topojson的链接是什么？这不是我已经在head标签中添加的链接吗？如果生成的geojson无效，则不会显示任何错误，也不会绘制任何特征。虽然很少看到这种情况，但您的topojson也可以使用不同的坐标系。看到这一点，让我们重新思考这个问题。