Question

如何获取经度，纬度和日期？我使用过嵌套，但无法正常工作。 lat和lon在HTML控制台中显示数据，但无法使用lat和lon在地图中将位置显示为圆圈。

问题出在var嵌套部分。我尝试了多种解决方法，但无法解决。

以下是数据：

[{
    "session":{"id":"1"},
    "location":{"lat":36.958992,"lon":-122.045301},
    "number":{"created":{"date":"2018-05-19 00:00:51.000000"}},

    "session":{"id":"2"},
    "location":{"lat":40.958992,"lon":-100.045301},
    "number":{"created":{"date":"2018-05-29 00:00:11.000000"}}
}]

这是我使用的代码：它是包含所有内容的html文件；

   <!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
    height = 500;

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(200)
    .rotate([-180,0]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

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

var g = svg.append("g");

function process(d){
    var processed = {
        lat: parseFloat(d.location.lat),
        lon: parseFloat(d.location.lon),
    }
    return processed;
}    

// load and display the World
d3.json("world-110m2.json", function(error, topology) {

// load and display the cities
d3.json("data.json", function(error, data) {

    console.log("data", data);

var nest_data = data.map(process);
    console.log("nest_data", nest_data);

var nested = d3.nest()
.key(function(d) { return d.location; })
.rollup(function(leaves) { return leaves.length; })
.entries(data);

    console.log("nested", nested);

    g.selectAll("circle")
       .data(data)
       .enter()
       .append("circle")
       .attr("cx", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("cy", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .attr("r", 5)
       .style("fill", "red");
});

g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

// zoom and pan
var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+ 
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("circle")
            .attr("d", path.projection(projection));
        g.selectAll("path")  
            .attr("d", path.projection(projection)); 

  });

svg.call(zoom)

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

如何从嵌套json文件获取d3.js的数据？

0 个答案: