shimizu/.block

## .block
license: mit
height: 900

## README.md

      
    Raw
  

              README.md
            
          
    パスのトランジションは、頂点数の変化に合わせて動作が変わるので、使う際には注意が必要です。
Built with blockbuilder.org

  
## index.html

<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png

	<!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>