他のユーザーからのアドバイスで、v4でマップをやり直すことにしました。このことを念頭に置いて、私は単純な地図から始めて、the arcs docsを読んでいますが、これをマップにどのように適用すればよいですか？arc d3 v4 mapの追加方法
var arc = d3.arc();
arc({
innerRadius: 0,
outerRadius: 100,
startAngle: 0,
endAngle: Math.PI/2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"
plnkr：http://plnkr.co/edit/ttXZdjmZDaqtTNvhb6Qz?p=preview
私はここにあなたの前の質問にコメントの質問に掛かってあなたを残し、あなたが後にあるかを簡単に刺すのです。最初の地図の図はd3文書の例hereです。描画後、hereから借りたカスタムアークの行を追加します。次にattrTweenに"stroke-dasharray"を使用して、線のアニメーションを作成し、その遷移の最後に別のトランジションを使用して円を拡大します。
実行コード：
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: 0.5px;
stroke-opacity: 0.5;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: 0.5px;
}
</style>
<svg width="960" height="960"></svg>
<script src="//d3js.org/d3.v4.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var projection = d3.geoMercator()
.scale((width - 3)/(2 * Math.PI))
.translate([width/2, height/2]);
var path = d3.geoPath()
.projection(projection);
var graticule = d3.geoGraticule();
svg.append("defs").append("path")
.datum({
type: "Sphere"
})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("https://rawgit.com/d3/d3-geo/master/test/data/world-50m.json", function(error, world) {
if (error) throw error;
svg.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) {
return a !== b;
}))
.attr("class", "boundary")
.attr("d", path);
var coordinates = [
projection([-74, 40]), // new york
projection([-43, -22]) // rio 22.9068° S, 43.1729° W
];
var line = svg.append("path")
.datum(coordinates)
.attr("d", function(c) {
var d = {
source: c[0],
target: c[1]
};
var dx = d.target[0] - d.source[0],
dy = d.target[1] - d.source[1],
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source[0] + "," + d.source[1] + "A" + dr + "," + dr +
" 0 0,1 " + d.target[0] + "," + d.target[1];
})
.style("stroke", "steelblue")
.style("stroke-width", 5)
.style("fill", "none")
.transition()
.duration(5000)
.attrTween("stroke-dasharray", function() {
var len = this.getTotalLength();
return function(t) {
return (d3.interpolateString("0," + len, len + ",0"))(t)
};
})
.on('end', function(d) {
var c = coordinates[1];
svg.append('circle')
.attr('cx', c[0])
.attr('cy', c[1])
.attr('r', 0)
.style('fill', 'red')
.style('fill-opacity', '0.5')
.transition()
.duration(2000)
.attr('r', 50)
.on('end', function(d) {
d3.select(this)
.transition()
.duration(2000)
.attr('r', 10);
});
});
});
</script><!DOCTYPE html>
<meta charset="utf-8">
<style>
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: 0.5px;
stroke-opacity: 0.5;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: 0.5px;
}
</style>
<svg width="960" height="960"></svg>
<script src="//d3js.org/d3.v4.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var projection = d3.geoMercator()
.scale((width - 3)/(2 * Math.PI))
.translate([width/2, height/2]);
var path = d3.geoPath()
.projection(projection);
var graticule = d3.geoGraticule();
svg.append("defs").append("path")
.datum({
type: "Sphere"
})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("https://rawgit.com/mbostock/topojson/master/examples/world-50m.json", function(error, world) {
if (error) throw error;
svg.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) {
return a !== b;
}))
.attr("class", "boundary")
.attr("d", path);
var coordinates = [
projection([-74, 40]), // new york
projection([37, 55]) // moscow
];
var line = svg.append("path")
.datum(coordinates)
.attr("d", function(c) {
var d = {
source: c[0],
target: c[1]
};
var dx = d.target[0] - d.source[0],
dy = d.target[1] - d.source[1],
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source[0] + "," + d.source[1] + "A" + dr + "," + dr +
" 0 0,1 " + d.target[0] + "," + d.target[1];
})
.style("stroke", "steelblue")
.style("stroke-width", 5)
.style("fill", "none")
.transition()
.duration(5000)
.attrTween("stroke-dasharray", function() {
var len = this.getTotalLength();
return function(t) {
return (d3.interpolateString("0," + len, len + ",0"))(t)
};
})
.on('end', function(d) {
var c = coordinates[1];
svg.append('circle')
.attr('cx', c[0])
.attr('cy', c[1])
.attr('r', 0)
.style('fill', 'red')
.style('fill-opacity', '0.5')
.transition()
.duration(2000)
.attr('r', 50)
.on('end', function(d) {
d3.select(this)
.transition()
.duration(2000)
.attr('r', 10);
});
});
});
</script>
こんにちは！あなたはこれに対する答えを知っていますか：https://stackoverflow.com/questions/43696831/why-dont-the-flags-appear？ – Coder1000
行間が正確ではありません。赤道上に描画すると北側にシフトする – jolly
@pksingh、より具体的にするか、例を挙げる必要があります。私はニューヨークからリオ・ド・ジャネイロ（「赤道上空」）まで走るために上記のコードを更新しました。私には正確に見えます。 – Mark