D3ネストグループを持つ複数のパスに沿ったD3アニメーションマーカー
user3471259
地図のルートを表す複数のパスを持つプロジェクトに取り組んでいます。このd3ネストの例に従って、データをキーでグループ化して複数のルートを作成します。
円要素をアニメーション化して、それぞれの個別のルートパスに沿って遷移させたいと思います。私の問題はこの例とこの解決策に非常に似ていることがわかりますが、解決策を私の例に適用する方法がわかりません。
グループのインデックス/キーをcreatePathTween関数に取り込む方法がわかりません。したがって、各ルート/パスに沿って遷移する円要素ではなく、最初のグループに1つの円要素しかありません。誰かが各ルートパスに遷移円要素を配置する方法を理解するのを手伝ってもらえますか？
これは私のd3コードです
<html>
<head>
<title>Hello</title>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<style>
}
.placeVisited{
fill:#999;
}
.journey{
fill: none;
}
</style>
</head>
<body>
<script>
var width = 1200;
var height = 550;
var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );
var g = svg.append( "g" );
var projection = d3.geoMercator()
.center([55, 12])
.scale(220)
.translate([width/2,height/2])
var geoPath = d3.geoPath()
.projection(projection);
var voyageLine = d3.line()
.x(function(d) { return projection([d.lon,d.lat])[0] ; })
.y(function(d) { return projection([d.lon,d.lat])[1]; })
.curve(d3.curveBasis);
var parseDate = d3.timeParse("%d %B %Y");
var parseYear = d3.timeParse("%Y");
var color = d3.scaleOrdinal(d3.schemeCategory10);
d3.queue()
.defer(d3.csv, "multipleVoyages2.csv")
.await(ready);
function ready (error, data){
data.forEach(function(d) {
d.year = parseYear(d.year);
d.lon= +d.lon;
d.lat = +d.lat;
});
var dataNest = d3.nest()
.key(function(d){return d.VoyageID;})
.entries(data);
var journey = g.selectAll(".journey")
.data(dataNest)
.enter()
.append("path")
.attr("class", "journey")
.style("stroke", function(d) {
return d.color = color(d.key); })
.attr("d", function(d){
return voyageLine(d.values);
})
.attr("stroke-dasharray", function() {
var totalLength = this.getTotalLength();
return totalLength + " " + totalLength;
})
.attr("stroke-dashoffset", function() {
var totalLength = this.getTotalLength();
return totalLength;
})
.transition()
.ease(d3.easeLinear)
.duration(5000)
.attr("stroke-dashoffset", 0);
var marker = g.append("circle")
.attr("r", 7)
.style("fill", "pink")
.attr("transform", "translate(-100,-100)")
.transition()
.ease(d3.easeLinear)
.duration(5000)
.attrTween("transform", createPathTween);
var placeGroups = g.selectAll(".placeVisited")
.data(dataNest)
.enter()
.append( "g" )
.attr("class","placeVisited");
var placeVisited = placeGroups.selectAll("placeVisited")
.data(function(d){
return d.values;
})
.enter()
.append("circle")
.attr("fill", function(d){
return d.color = color(d.VoyageID);
})
.attr("cx", function(d, i) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d, i) {
return projection([d.lon, d.lat])[1];
})
.attr("r", 5)
//transitioning marker
//from this example -- http://fiddle.jshell.net/RnNsE/2/
function createPathTween(d, i, a) {
// var path = this.parentNode.getElementsByTagName("journey")[0];
var path = this.parentNode.getElementsByClassName("journey")[i]; //don't understand how to get the index for each group
var l = path.getTotalLength();
console.log("path");
console.log(path);
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
}
}
</script>
</body>
</html>
と私のcsv：
VoyageID,VoyageType,voyageName,ObjectID,arrivalDateTxt,year,ObjectNumber,placeName,lon,lat,url,,,
1,Pleasure cruise,Postcards home,170207,14 January 1906,1906,ANMS1113[006],Port Pirie,138.16,-33.183,http://collections.anmm.gov.au/en/objects/details/170207/,,,
1,Pleasure cruise,Postcards home,170205,1 May 1907,1907,ANMS1113[004],Mount Lofty Ranges,138.6,-34.933,http://collections.anmm.gov.au/en/objects/details/170205/,,,
1,Pleasure cruise,Postcards home,170216,26 October 1907,1907,ANMS1113[015],Brisbane,153,-27.5,http://collections.anmm.gov.au/en/objects/details/170216/,,,
1,Pleasure cruise,Postcards home,170200,4 November 1907,1907,ANMS1113[001],Adelaide,138.6,-34.933,http://collections.anmm.gov.au/en/objects/details/170200/,,,
1,Pleasure cruise,Postcards home,170213,26 November 1907,1907,ANMS1113[012],Fremantle,115.766,-32.5,http://collections.anmm.gov.au/en/objects/details/170213/,,,
1,Pleasure cruise,Postcards home,170209,3 December 1907,1907,ANMS1113[008],Adelaide,138.6,-34.933,http://collections.anmm.gov.au/en/objects/details/170209/,,,
1,Pleasure cruise,Postcards home,170212,10 December 1907,1907,ANMS1113[011],Melbourne,144.966,-37.75,http://collections.anmm.gov.au/en/objects/details/170212/,,,
1,Pleasure cruise,Postcards home,170217,20 December 1907,1907,ANMS1113[016],Sydney,151.166,-33.916,http://collections.anmm.gov.au/en/objects/details/170217/,,,
1,Pleasure cruise,Postcards home,170203,26 December 1907,1907,ANMS1113[002],Brisbane,153,-27.5,http://collections.anmm.gov.au/en/objects/details/170203/,,,
1,Pleasure cruise,Postcards home,170215,26 December 1907,1907,ANMS1113[014],Brisbane,153,-27.5,http://collections.anmm.gov.au/en/objects/details/170215/,,,
1,Pleasure cruise,Postcards home,170211,8 January 1908,1908,ANMS1113[010],Port Pirie,138.16,-33.183,http://collections.anmm.gov.au/en/objects/details/170211/,,,
1,Pleasure cruise,Postcards home,170208,14 January 1908,1908,ANMS1113[007],Port Pirie,138.16,-33.183,http://collections.anmm.gov.au/en/objects/details/170208/,,,
2,Kayak adventure,Oskar,1,1 March 1961,1961,,London,-0.127758,51.507351,,,,
2,Kayak adventure,Oskar,2,2 April 1961,1961,,Paris,2.352222,48.856614,,,,
2,Kayak adventure,Oskar,3,3 June 1961,1961,,Lyon,4.835659,45.764043,,,,
2,Kayak adventure,Oskar,4,28 June 1961,1961,,Calais,1.858686,50.95129,,,,
2,Kayak adventure,Oskar,5,10 July 1961,1961,,Frankfurt,8.682127,8.682127,,,,
2,Kayak adventure,Oskar,6,19 December 1961,1961,,Berlin,13.404954,52.520007,,,,
2,Kayak adventure,Oskar,7,25 January 1962,1962,,Amsterdam,4.895168,52.370216,,,,
2,Kayak adventure,Oskar,8,30 June 1962,1962,,rome,12.496366,41.902783,,,,
2,Kayak adventure,Oskar,9,24 November 1962,1962,,Milan,9.189982,45.464204,,,,
2,Kayak adventure,Oskar,10,19 January 1963,1963,,Turin,7.686856,45.070312,,,,
2,Kayak adventure,Oskar,11,27 January 1963,1963,,Florence,11.255814,43.76956,,,,
2,Kayak adventure,Oskar,12,30 April 1963,1963,,Vienna,16.373819,48.208174,,,,
3,Whaling ,Barque Terror,123,12 March 1845,1845,,Island 1,155.370833,-24.916667,,,,
3,Whaling ,Barque Terror,777,15 March 1845,1845,,Island 2,162.81738,-20.6739,,,,
3,Whaling ,Barque Terror,546,22 March 1845,1845,,Place in ocean 3,160.26464,-11.66325,,,,
3,Whaling ,Barque Terror,888,23 July 1845,1845,,Place in ocean 4,161.94638,-10.18388,,,,
3,Whaling ,Barque Terror,543,19 December 1845,1845,,Place in ocean 5,160.90712,-8.94461,,,,
3,Whaling ,Barque Terror,2134,22 January 1846,1846,,Place in ocean 6,158.74232,-9.01835,,,,
3,Whaling ,Barque Terror,6666,30 January 1846,1846,,Back home,157.26555,-8.19361,,,,
アディティアK
あなたはあなたとあなたの両方のためpathsのdelay機能を使い終わった後にアニメーション化することができpathますmarker：
.duration(5000)
.delay(function(d, i) { // 'i' will give you the index
return i * 5000; // Multiply by 5000 so that it starts after the previous one has finished.
});
そしてcircle、すべてのマーカーを取得pathするには、次のcirclesように同じ数を作成する必要があります。
var marker = g.selectAll('circle')
.data(dataNest).enter()
.append("circle")...
またd3.curveCatmullRom、より良いために使用しますpath。
これがプランカーです
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
d3パスでグループをアニメーション化
- 2
D3一度に1つのパスシリーズをアニメーション化する
- 3
d3アークによるパスのアニメーション化
- 4
複数のパスに沿った円のアニメーション
- 5
パスとSVGを使用したd3アニメーション折れ線グラフ
- 6
d3でラップされたテキストをアニメーション化する
- 7
D3でアニメーションパルスサークルを作成する
- 8
複数のパスを1つのD3（SVG）にマージする
- 9
D3.jsの単純なラインパスに沿って外部svgオブジェクトをアニメーション化する
- 10
d3ラジアルワイプアニメーションクリップ1つの要素
- 11
アニメーションを使用したd3階層を使用してツリールートの周囲にノードを分散します
- 12
グループ化され、ネストされたjson座標データの遷移をD3.jsでアニメーション化する方法は？
- 13
D3シーケンスサンバーストアニメーション
- 14
折れ線グラフD3でスムーズなアニメーションを取得する
- 15
D3ページの読み込み時にグラフをアニメーション化する
- 16
konvaの線またはパスに沿ってシェイプをアニメーション化する
- 17
WPF：パスジオメトリに沿ったアニメーション
- 18
パスのセグメントに沿ったD3遷移と、座標値での一時停止
- 19
css3アニメーションを使用してカーブしたパスに沿ってボールをアニメーション化する方法は？
- 20
D3で可変速度のマルチラインプロットをアニメーション化する
- 21
D3ビジュアライゼーションを別のビジュアライゼーション内にネストするためのサンプルコードはありますか？
- 22
D3棒グラフアニメーションを再起動します
- 23
D3のグループ化された棒グラフはxスケールに沿って広がりません
- 24
ノード間のリンクを持つグーグルマップ上のd3グラフ
- 25
同時に複数のアニメーションを持つCSS3
- 26
強制レイアウトd3でノードにマウスオーバーしたときの接続されたリンク線のアニメーション
- 27
スクロールのsvgパスに沿って要素をアニメーション化する方法は？
- 28
ストロークアニメーションの複数の原点を持つSVGサークル
- 29
D3シンボルマップに接続線（「グレートアーク」）を描画する
コメントを追加