0
이 문제에서 다음과 같이 csv - d3 line and points on map from csv data에서 선 스트링을 생성합니다 - 내 데이터 (위의 geojson 또는 lon, lat 데이터가있는 CSV)에서 이것을 다시 만들고 싶습니다. : 
d3 라인 및 geojson 또는 csv 데이터에서지도에 포인트
내 목표는 내가이 샘플 내 geojson 데이터를 사용하는 방법을 작동하지 않을 수
http://mtaptich.github.io/d3-lessons/d3-extras/처럼 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
]
]
}
}
]
}