Question

HTML文件中的点json为NULL。 HTML文件如下：

<!DOCTYPE html>
<html>
<head>
<title>D3.js GoogleMap Voronoi Diagram</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script   src="http://shimz.me/example/d3js/geo_example/geo_template/topojson.v0.min.js">    </script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?  sensor=false"></script>
<style type="text/css">
html, body{
margin: 0px;
padding: 0px;
}
html, body, #map_canvas {
width: 100%;
height: 100%;
}

.SvgOverlay {
position: relative;
width: 900px;
height: 600px;           
}

.SvgOverlay svg {
position: absolute;
top: -4000px;
left: -4000px;
width: 8000px;
height: 8000px;        
}

</style>
</head>
<body>
<div id="option">
<input name="updateBus" 
       type="button" 
       value="Bus" 
       onclick="updateBus()" />
</div>
<div id="option">
<input name="updateTrain" 
       type="button" 
       value="Train" 
       onclick="updateTrain()" />
</div>
<div id="option">
    <input name="updateTaxi" 
       type="button" 
       value="Taxi" 
       onclick="updateTaxi()" />
</div>


<div id="map_canvas"></div>
<br>

<script type="text/javascript">
function updateBus() {
d3.json('bus-stops.json', function(pointjson){
    main(pointjson); 
    alert(pointjson);
});

function main(pointjson) {

    //Google Map
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(1.290270,103.851959),       
    });


    var overlay = new google.maps.OverlayView(); //OverLay


    overlay.onAdd = function () {

        var layer =   d3.select(this.getPanes().overlayLayer).append("div").attr("class",   "SvgOverlay");
        var svg = layer.append("svg");
        var svgoverlay = svg.append("g").attr("class", "AdminDivisions");


        overlay.draw = function () {
        var markerOverlay = this;
        var overlayProjection = markerOverlay.getProjection();

        //Google Map
            var googleMapProjection = function (coordinates) {
            var googleCoordinates = new google.maps.LatLng(coordinates[1],  coordinates[0]);
            var pixelCoordinates =   overlayProjection.fromLatLngToDivPixel(googleCoordinates);
            return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
        }


        var pointdata = pointjson.features;
        alert(pointdata);


        var positions = [];

        pointdata.forEach(function(d) {     
                positions.push(googleMapProjection(Number(d.geometry.coordinates))); 
            alert(d.geometry.coordinates);
        });


        var polygons = d3.geom.voronoi(positions);

        var pathAttr ={
            "d":function(d, i) { return "M" + polygons[i].join("L") + "Z"},
            stroke:"red",
            fill:"none"         
        };


        svgoverlay.selectAll("path")
            .data(pointdata)
            .attr(pathAttr)
            .enter()
            .append("svg:path")
            .attr("class", "cell")
            .attr(pathAttr)

        var circleAttr = {
                "cx":function(d, i) { return positions[i][0]; },
                "cy":function(d, i) { return positions[i][1]; },
                "r":2,
                fill:"red"          
        }


        svgoverlay.selectAll("circle")
            .data(pointdata)
            .attr(circleAttr)
            .enter()
            .append("svg:circle")
            .attr(circleAttr)

    };

    };


    overlay.setMap(map);


};
};

</script>

</body>
</html>

bus-stops.json文件与html文件保存在同一文件夹中。 JSON文件的结构如下：

{
    "type": "FeatureCollection",
    "features": [
    {
        "no": "10009",
        "lat": "1.28210155945393",
        "lng": "103.81722480263163",
        "name": "Bt Merah Int",
        "populationDensity": 143.75,
        "geometry": {"type": "Point","coordinates": [1.28210155945393, 103.81722480263163]}
    }, {
        "no": "10011",
        "lat": "1.2777380589964",
        "lng": "103.83749709165197",
        "name": "Opp New Bridge Rd Ter",
        "populationDensity": 1131.25,
        "geometry": {"type": "Point","coordinates": [1.2777380589964, 103.83749709165197]}
    }]
}

Voronoi结构没有出现，因为数据没有填充到pointjson中。请告诉我这里我出错的地方。

使用D3代码的voronoi图未填充JSON数据

0 个答案: