パスのトランジションは、頂点数の変化に合わせて動作が変わるので、使う際には注意が必要です。
Built with blockbuilder.org
license: mit | |
height: 900 |
パスのトランジションは、頂点数の変化に合わせて動作が変わるので、使う際には注意が必要です。
Built with blockbuilder.org
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>path</title> | |
<style> | |
svg { | |
width: 930px; | |
height: 150px; | |
border: 1px solid black; | |
margin-top: 10px; | |
} | |
input { | |
width:900px; | |
} | |
path { | |
fill:none; | |
stroke:black; | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
<h2>頂点3→3(同じ場合)</h2> | |
<svg id="svg1"></svg> | |
<br> | |
d=<input type="text" id="pahtd1"> | |
<br> | |
<button id="run1">run</button> | |
<button id="reset1">reset</button> | |
</div> | |
<div> | |
<h2>頂点2→3(増える場合)</h2> | |
<svg id="svg2"></svg> | |
<br> | |
d=<input type="text" id="pahtd2"> | |
<br> | |
<button id="run2">run</button> | |
<button id="reset2">reset</button> | |
</div> | |
<div> | |
<h2>頂点3→2(減る場合)</h2> | |
<svg id="svg3"></svg> | |
<br> | |
d=<input type="text" id="pahtd3"> | |
<br> | |
<button id="run3">run</button> | |
<button id="reset3">reset</button> | |
</div> | |
<script src="//unpkg.com/babel-standalone@6.26.0/babel.min.js"></script> | |
<script src="//unpkg.com/d3@4.12.2/build/d3.min.js"></script> | |
<script type="text/babel"> | |
const dataSet1 = [ | |
{x:20, y:10}, | |
{x:940, y:130}, | |
] | |
const dataSet2 = [ | |
{x:20, y:10}, | |
{x:340, y:130}, | |
{x:940, y:10}, | |
] | |
const dataSet3 = [ | |
{x:20, y:130}, | |
{x:340, y:10}, | |
{x:940, y:130}, | |
] | |
const path = d3.line() | |
.x(d => d.x ) | |
.y(d => d.y ) | |
/***************************************************************************** | |
* path 1 頂点3→3(同じ場合) | |
******************************************************************************/ | |
const svg1 = d3.select("#svg1") | |
const path1 = svg1.append("path") | |
.attr("d", d => { | |
const lineStr = path(dataSet2); | |
document.querySelector("#pahtd1").value = lineStr; | |
return lineStr; | |
}) | |
//実行ボタン | |
d3.select("#run1").on("click", function(){ | |
path1.transition().duration(1000).attr("d", function(){ | |
const lineStr = path(dataSet3); | |
document.querySelector("#pahtd1").value = lineStr; | |
return lineStr; | |
}) | |
}); | |
//リセットボタン | |
d3.select("#reset1").on("click", function(){ | |
path1.attr("d", function(){ | |
const lineStr = path(dataSet2); | |
document.querySelector("#pahtd1").value = lineStr; | |
return lineStr; | |
}) | |
}); | |
/***************************************************************************** | |
* path 2 頂点2→3(増える場合) | |
******************************************************************************/ | |
const svg2 = d3.select("#svg2") | |
const path2 = svg2.append("path") | |
.attr("d", d => { | |
const lineStr = path(dataSet1); | |
document.querySelector("#pahtd2").value = lineStr; | |
return lineStr; | |
}) | |
d3.select("#run2").on("click", () =>{ | |
path2.transition().duration(1000).attr("d", () => { | |
const lineStr = path(dataSet2); | |
document.querySelector("#pahtd2").value = lineStr; | |
return lineStr; | |
}) | |
}); | |
d3.select("#reset2").on("click", () => { | |
path2.attr("d", () => { | |
const lineStr = path(dataSet1); | |
document.querySelector("#pahtd2").value = lineStr; | |
return lineStr; | |
}) | |
}); | |
/***************************************************************************** | |
* path 3 頂点3→2(減る場合) | |
******************************************************************************/ | |
const svg3 = d3.select("#svg3") | |
const path3 = svg3.append("path") | |
.attr("d", d => { | |
const lineStr = path(dataSet2); | |
document.querySelector("#pahtd3").value = lineStr; | |
return lineStr; | |
}) | |
d3.select("#run3").on("click", () => { | |
path3.transition().duration(1000).attr("d", () => { | |
const lineStr = path(dataSet1); | |
document.querySelector("#pahtd3").value = lineStr; | |
return lineStr; | |
}) | |
}); | |
d3.select("#reset3").on("click", () => { | |
path3.attr("d", () => { | |
const lineStr = path(dataSet2); | |
document.querySelector("#pahtd3").value = lineStr; | |
return lineStr; | |
}) | |
}); | |
</script> | |
</body> | |
</html> |