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
]
]
}
}
]
}