Question

所以我在传单地图上使用d3加载json数据时遇到了一些问题。我还在学习d3而且我不知道我是否真的在做一些没有意义的事情。

这是我的HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="d3.min.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
    <script src="leaflet.js"> </script>
    <script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
    <style>
    #map {
      width: 1100px;
      height:700px; 
      margin-top:70px;
      margin-left:400px;
       }
    </style>
</head>

<body Style ="background-color:black">
     <div id="map" class ="map"></div>

     <script>
     // Creating the map using mapboz
    L.mapbox.accessToken = 'pk.eyJ1IjoiYWxtYWhhIiwiYSI6ImM4M2YxY2U3ZDVhNTg3YjdkZWI0MDRkNmU5YzU5NWI4In0.5g65rHetoEtp1RqK8t2gsA';
    var map = L.mapbox.map('map', 'mapbox.dark').setView([24.7261032, 46.72965312], 10);
    map._initPathRoot();

    // Add an SVG element to Leaflet’s overlay pane
    var svg = d3.select(map.getPanes().overlayPane).append("svg"),
    g = svg.append("g").attr("class", "leaflet-zoom-hide");

    // loading data fromm json file using D3 
    d3.json("district_information_fixed.json", function(error, data) {
    if (error) alert(error);

    var Circles = svg.selectAll("circle").data(data.coordinates).enter().append("circle")
    .attr("r", 5)
    .style("stroke", "black")
    .style("opacity", .6) 
    .style("fill", "yellow");
    });
     </script>
</body>
</html>

另外，你可以在这里找到我的json文件 https://www.dropbox.com/s/intll62eax3ceua/district_information_fixed.json?dl=0

关于服务器，我正在运行一个简单的node.js服务器

var express = require('express');
var path = require('path');
var app = express();
app.use(express.static(path.resolve("./")));
app.get('/', function(req, res) {
  res.sendFile('/Desktop/d3js_projects/project_1.html');
});
var port = process.env.PORT || 8000;
var server = app.listen(port, function() {
  console.log('Listening on port:', port);
});

在传单地图上使用D3加载数据？

0 个答案: