时间戳

首页 > 解决方案 > D3：它没有显示美国地图

javascript - D3：它没有显示美国地图

问题描述

我的控制台中没有错误，并且我的 xampp 服务器已启动。我在浏览器中使用http://localhost/d3/project/graph1.html调用代码，这应该是正确的路径。但是页面只是白色的，它没有向我显示美国的地图。这些是我放在头上的脚本

    <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>

标签： javascriptdictionaryd3.jsxamppshow

解决方案

推荐阅读