Question

我正在为一家我计划工作的公司开展一个项目，并且我接受了代码挑战，以创建肯尼亚的等值线图。我已经能够使用GeoJSON和TopoJSON生成地图，从文件夹中的JSON文件中绘制路径。目前，这就是我的HTML外观：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
                <script type="text/javascript" src="js/d3.v3.js"></script>
                <script type="text/javascript" src="js/topojson.js"></script>
                <script type="text/javascript" src="js/jquery.js"></script>
                <script type="text/javascript" src="js/bootstrap.js"></script>



                <link rel="stylesheet" href="css/bootstrap.css" media="screen">
        </head>
        <body>
            <div class="row">
            <header class="span12">
                <h1>Aphellion Activity 1 - Kenya Maps</h1>
                <h3>The goal of this activity is generate two maps one drawn with D3.js using GeoJSON to generates the paths, the other drawn using TopoJSON to generate the paths.</h3>
            </header>
            </div>
            </br>
            <div class="row">
                <div  class="span4" id="Map1"></div>
                <div class="span2" id="paragraph">

                </div>
                <div class="span4" id="Map2"></div>
                <div class="span2">
                    <p>Mauris ornare mollis odio, non molestie arcu ullamcorper sit amet. Vivamus ultrices, est id ullamcorper blandit, risus ligula fringilla nibh, in convallis orci urna et sapien. Phasellus malesuada accumsan velit ut tristique. Duis vehicula pellentesque gravida. Curabitur at mollis turpis, in convallis risus. Sed faucibus non dui quis vehicula. Fusce mollis ullamcorper adipiscing. Vestibulum hendrerit luctus erat ac iaculis.</p>
                </div>
            </div>
        </body>
        <script type="text/javascript">
            d3.select("div#paragraph").text("Mauris ornare mollis odio, non molestie arcu ullamcorper sit amet. Vivamus ultrices, est id ullamcorper blandit, risus ligula fringilla nibh, in convallis orci urna et sapien. Phasellus malesuada accumsan velit ut tristique. Duis vehicula pellentesque gravida. Curabitur at mollis turpis, in convallis risus. Sed faucibus non dui quis vehicula. Fusce mollis ullamcorper adipiscing. Vestibulum hendrerit luctus erat ac iaculis");

            var width = 300;
            var height = 400;

    //TopoJSON Map
    //new projection
        var projection = d3.geo.mercator()
                                .center([36.8000, 1.2667])
                .scale([1000])
                                .translate([width/2, height/2]);


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


    var svg = d3.select("div#Map1")
                        .append("svg")
                        .attr("width", width)
                        .attr("height", height)
                        .style("fill", "steelblue");

            var g = svg.append("g")
                        .call(d3.behavior.zoom()
                              .scaleExtent([1, 10])
                              .on("zoom", zoom));

            d3.json("js/kenya-topo.json", function(error, topology) {
                g.selectAll("path")
                .data(topojson.feature(topology, topology.objects.Kenya).features)
                .enter()
                .append("path")
                .attr("d", path);
                });

            svg.append("rect").attr("width", width).attr("height", height).style("stroke", "black").style("fill", "none");

            function zoom() {
                g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            };

    //GeoJSON Map        
    var svg = d3.select("div#Map2")
                .append("svg")
                .attr("width", width)
                .attr("height", height);

    //Load in GeoJSON data
            d3.json("js/kenya.geojson", function(json) {

                //Create first guess for the projections
                var center = d3.geo.centroid(json)
                var scale = 2000;
                var offset = [width/2, height/2];
                var projection = d3.geo.mercator()
                            .scale(scale)
                            .center(center)
                            .translate(offset);

                //Define default path generator
                var path = d3.geo.path()
                    .projection(projection);

                //using the path determine the bounds of the current map and use
                //these to determine better values for the scale and translation
                var bounds = path.bounds(json);
                var hscale = scale*width / (bounds[1][0] - bounds[0][0]);
                var vscale = (hscale < vscale) ? hscale : vscale;
                var offset = [width - (bounds[0][0] + bounds[1][0])/2, height - (bounds[0][1] + bounds[1][1]/2)];

                //new projection
                projection = d3.geo.mercator().center(center)
                        .scale(scale).translate(offset);
                path = path.projection(projection);

                //add a rectangle to see the bound of the svg
                svg.append("rect").attr("width", width).attr("height", height).style("stroke", "black").style("fill", "none");



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

    </html>

正如你可以看到我的JavaScript低于但我想要的是将它放在两个单独的文件中，我将在其中查询。当我这样做时，数据不会绑定到DOM，也不会生成SVG。我没有在控制台中看到任何错误，因此我认为在单独的JavaScript文件中编写我的D3代码时我会发现一些错误。谁可以在这方面帮助我？非常感谢。

P.S。请原谅我的代码的混乱，我在我们说话时重构它。我从书中和网上发现的两种不同的食谱中得到了它。

Answer 1

这个答案可能看起来很晚，但我遇到了同样的问题，修复它的问题是记住包含转移代码的脚本需要在body标记结束之前放在页面的最底部。将链接到d3库的脚本放在编写脚本的正上方总是一个好主意。原因是，如果你把你的脚本放在html页面的head标签中，它搜索的元素还不存在。除非指定，否则当它到达DOM时，一切都是同步的。

Answer 2

要分析您需要从语义上理解的问题，脚本标记可以被它们引用的代码替换，并且在处理下一个节点之前执行引用的代码，因此它与索引文件中的代码相同在脚本标签的位置。

D3js外部JavaScript文件

2 个答案: