パスのトランジションは、頂点数の変化に合わせて動作が変わるので、使う際には注意が必要です。
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>頂点３→３(同じ場合)</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>頂点２→３(増える場合)</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>頂点３→２(減る場合)</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 頂点３→３(同じ場合)
******************************************************************************/
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 頂点２→３(増える場合)
******************************************************************************/
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 頂点３→２(減る場合)
******************************************************************************/
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>