Question

从这个问题开始，从csv创建一个线串 - d3 line and points on map from csv data - 我希望从我的数据中重新创建这个（下面的geojson，或带有lon，lat数据的csv）： < / p>

我的目标是沿着从http://mtaptich.github.io/d3-lessons/d3-extras/

等geojson坐标创建的直线进行圆转换

我无法弄清楚如何在此示例中使用我的geojson数据。我认为这一定很简单，但我已经尝试过，只是无法解决如何正确解析它。我有点类型数据，我可以使用它来制作线串，我也有线串。非常感谢这里的帮助。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="utf-8">
<title>Animate_StartPause3</title>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<style type="text/css">

circle {
  fill: steelblue;
  stroke: pink;
  stroke-width: 3px;
}

.journey{
  fill: none;
  stroke: red;
  stroke-width: 4;
  stroke-dasharray: 4px,8px;
}

.point{
    fill:green;
}

</style>
</head>
<body>


<script>

    var w = 960,
        h = 500;

    var projection = d3.geoMercator()
                         .translate([w/2, h/2])
                         .scale([w * 0.16]);

    var gpath = d3.geoPath()
                 .projection(projection);

    var duration = 10000;

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

    var line = d3.line()
    .x(function(d){return projection(d)[0];})
    .y(function(d){return projection(d)[1];})
    .curve(d3.curveBasis);

//bring in data
d3.queue()
    .defer(d3.json, "oceans.json")
    .defer(d3.json, "data_short.json")
    .await(ready);

function ready (error, oceans, data){
    if (error) throw error;

//map
svg.selectAll("path")
        .data(oceans.features)
        .enter()
        .append("path")
        .attr("d", gpath)
        .style("fill", "#A8B2C3");


var linepath = svg.append("path")
  .data(?)
  .attr("d", line)
    .attr('class', 'journey');

    svg.selectAll(".point")
      .data(?)
        .enter()
        .append("circle")
      .attr("r", 7)
      .attr("transform", function(d) { return "translate(" + projection(d) + ")"; });


var circle = svg.append("circle")
  .attr("r", 19)
  .attr("transform", "translate(" + projection(coordinates[0]) + ")");

var pauseValues = {
        lastT: 0,
        currentT: 0
        };

function transition() {
  circle.transition()
      .duration(duration - (duration * pauseValues.lastT))
      .attrTween("transform", translateAlong(linepath.node()))
      .on("end", function(){
        pauseValues = {
          lastT: 0,
          currentT: 0
        };
        transition()
      });
}

function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      t += pauseValues.lastT;
      var p = path.getPointAtLength(t * l);
      pauseValues.currentT = t;
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

d3.select('button').on('click',function(d,i){
  var self = d3.select(this);
  if (self.text() == "Pause"){
        self.text('Play');
        circle.transition()
      .duration(0);
        setTimeout(function(){
            pauseValues.lastT = pauseValues.currentT;
        }, 100);
  }else{
    self.text('Pause');
    transition();
  }
});
}
</script>
</body>
</html>

这是我的geojson样本：

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "properties":{
            "name":"Ulm",
            "desc":"Ulm, Ulm, Baden-Württemberg, DE",
            "src":"",
            "link1_href":"http://collections.anmm.gov.au/en/objects/details/85834/",
            "link1_text":"",
            "link1_type":"",
            "type":"",
            "date_Arrival":"14 May 1932",
            "date_Departure":"14 May 1932",
            "objectNumber":"ANMS0533[020]",
            "objectID":85834
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               9.993276,
               48.397394
            ]
         }
      },    
      {
         "type":"Feature",
         "properties":{
            "name":"Sydney (Elizabeth Bay)",
            "desc":"Elizabeth Bay, Sydney NSW, Australia",
            "src":"",
            "link1_href":"http://collections.anmm.gov.au/en/objects/details/85001/",
            "link1_text":"",
            "link1_type":"",
            "type":"",
            "date_Arrival":"1 May 1947",
            "date_Departure":"",
            "objectNumber":"ANMS0540[004]",
            "objectID":85001
         },
         "geometry":{
            "type":"Point",
            "coordinates":[
               151.22841,
               -33.87143
            ]
         }
      },
      {
         "type":"Feature",
         "properties":{

         },
         "geometry":{
            "type":"LineString",
            "coordinates":[
               [
                  9.993276,
                  48.397394
               ],
               [
                  9.9920654296875,
                  48.40185599006367
               ],
               [
                  10.107421874999998,
                  48.44560023585716
               ],
               [
                  10.30517578125,
                  48.46563710044979
               ],
               [
                  91.723674,
                  22.423776
               ],
               [
                  92.039964,
                  21.165872
               ],

               [
                  112.72367,
                  -7.24039
               ],

               [
                  151.22841,
                  -33.87143
               ]
            ]
         }
      }
   ]
}

Answer 1

我终于找到了如何获取数据并映射我的旅程路径，包括来自我的json的线串类型数据。我认为有更好的方法可以做到这一点，但确实有效，

我浏览了json数据：

    var points = data.features;
    var geojson =[]
    for (var i = 0; i < points.length; i++) {
            var x = points[i].geometry.coordinates[0];
            var y = points[i].geometry.coordinates[1];
            geojson.push([x,y]);
            }

  var lineString = { "type": "LineString", "coordinates": geojson }

然后修改了linepath以使用这样的数据：

var linepath = g.append("path")
 .data([lineString]) //works with path but not line
  .attr("d", path)
//  .data([geojson])// works with line but not path
 // .attr("d", line)
  .attr('class', 'journey');

从geojson或csv数据在地图上显示d3行和点

1 个答案: