Question

我使用了github（https://github.com/alignedleft/d3-book/blob/master/chapter_12/04_fill.html）的代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Setting path fills</title>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">
            //Width and height
            var w = 500;
            var h = 300;
            //Define map projection
            var projection = d3.geo.albersUsa()
                                   .translate([w/2, h/2])
                                   .scale([500]);
            //Define path generator
            var path = d3.geo.path()
                             .projection(projection);
            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
            //Load in GeoJSON data
            d3.json("us-states.json", function(json) {

                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .style("fill", "steelblue");

            });

        </script>
    </body>
</html>

JSON文件来自（https://github.com/alignedleft/d3-book/edit/master/chapter_12/us-states.json）。

样品：

{＆＃34;类型＆＃34;：＆＃34;＆的FeatureCollection＃34;＆＃34;特征＆＃34;：[ {＆＃34;类型＆＃34;：＆＃34;特征＆＃34;＆＃34; ID＆＃34;：＆＃34; 01＆＃34;＆＃34;属性＆＃34; {＆＃34 ;名称＆＃34;：＆＃34;阿拉巴马＆＃34;}＆＃34;几何＆＃34; {＆＃34;类型＆＃34;：＆＃34;多边形＆＃34;＆＃34;坐标＆＃ 34;：[[[ - 87.359296,35.00118]，[ - 85.606675,34.984749]，[ - 85.431413,34.124869]，[ - 85.184951,32.859696]，[ - 85.069935,32.580372]，[ - 84.960397,32.421541]，[ - 85.004212 ，32.322956]，[ - 84.889196,32.262709]，[ - 85.058981,32.13674]，[ - 85.053504,32.01077]，[ - 85.141136,31.840985]，[ - 85.042551,31.539753]，[ - 85.113751,31.27686]，[ - 85.004212， 31.003013]，[ - 85.497137,30.997536]，[ - 87.600282,30.997536]，[ - 87.633143,30.86609]，[ - 87.408589,30.674397]，[ - 87.446927,30.510088]，[ - 87.37025,30.427934]，[ - 87.518128,30.280057 ]，[ - 87.655051,30.247195]，[ - 87.90699,30.411504]，[ - 87.934375,30.657966]，[ - 88.011052,30.685351]，[ - 88.10416,30.499135]，[ - 88.137022,30.318396]，[ - 88.394438,30.367688] ，[ - 88.471115,31.895754]，[ - 88.241084,33.796253]，[ - 88.098683,34.891641]，[ - 88.202745,34.995703]，[ - 87.359296,35.00118]]]}}，...

但是我得到一个空的HTML页面作为输出。我错过了什么？

Answer 1

不，我没有看到代码有任何问题，但可能us-states.json在您的代码所在的根文件夹中不可用。

您也可以直接从github访问us-states.json，如下所示：

        d3.json("https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-states.json", function(json) {

            //Bind data and create one path per GeoJSON feature
            svg.selectAll("path")
               .data(json.features)
               .enter()
               .append("path")
               .attr("d", path)
               .style("fill", "steelblue");

        });

工作代码here

D3 JS - GeoJson（美国地图） - 没有加载

1 个答案: