d3v4制作各种线形图并利用按钮切换类型_d3 折线图连线不同类型-CSDN博客

本文链接：https://blog.csdn.net/ZZS423/article/details/128450076

d3v4制作各种线形图并利用按钮切换类型

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>d3线形图</title>
    <!--script src="https://d3js.org/d3.v4.min.js"></script-->
    <script src="d3.v4.js"></script>

</head>
<body>

<h4>Curve Mode</h4>
<button id='Linear'>Linear</button>
<button id='LinearClosed'>Linear Closed</button>
<button id='StepBefore'>Step Before</button>
<button id='StepAfter'>Step After</button>
<button id='Basis'>Basis</button>
<button id='BasisOpen'>Basis Open</button>
<button id='Cardinal' onclick='render(d3.curveCardinal.tension(0.4))'>Cardinal</button>
//tension 0-1 线的张力改变
<br/>
<br/>


<script type="text/javascript">

var w=600,h=400,margin=30

var svg=d3.select("body")
        .append("svg")
        .attr("width",w)
        .attr("height",h)
        .style("background-color","lavender")

// var data=[[[0,80],[100,100],[200,30],[300,50],[400,40],[500,80]],[]]
var data=[[{x:0,y:5},{x:1,y:9},{x:2,y:7},{x:3,y:5},{x:4,y:3},{x:6,y:4},{x:7,y:2},{x:8,y:3},{x:9,y:2}],
			d3.range(10).map(
				function(i){
					return {x:i,y:Math.sin(i)+5}
				}	
			)//构造坐标
]
//xy比例尺，映射坐标
var xScale=d3.scaleLinear()
			.domain([0,10])
			.range([margin,w-margin])
var yScale=d3.scaleLinear()
			.domain([0,10])
			.range([h-margin,margin])

//定义xaxis yaxis 
var xAxis=d3.axisBottom()
			.scale(xScale)
			.ticks(5)
			
var yAxis=d3.axisLeft()
			.scale(yScale)
			.ticks(5)
						
render(d3.curveLinear)
function render(mode){
//定义线生成器
	var line=d3.line()
				.x(function(d,i){return xScale(d.x)})
				.y(function(d,i){return yScale(d.y)})
				.curve(mode)//线的平滑程度

	var color=d3.scaleOrdinal(d3.schemeCategory20c)		
//append path
	var lineSelection=svg.selectAll('path.line')
		.data(data)
	//enter
	lineSelection.enter()
				.append('path')
				.attr('class','line')
				.attr('d',function(d,i){return line(d)})
				.style('stroke',function(d,i){return color(i)})//线的颜色
				.style('fill','transparent')//默认填充黑色
				.style('stroke-dasharray','3,2')//线性，虚线
	//update
	lineSelection.transition()
				.delay(function(d,i){return 500/data.length*i})
				.duration(500)
				.ease(d3.easeLinear)
				.attr("class",'path')
				.attr('d',function(d,i){return line(d)})
				.style('stroke',function(d,i){return color(i)})
	//exit
	lineSelection.exit().remove
	renderDots(svg)
	renderAxis(svg)
	
	console.log(data)
	console.log(line(data[0]))
	console.log(line(data[1]))
}
//画坐标轴
function renderAxis(svg){
	
	svg.select('#axisG')
		.remove()
		
	var axisG=svg.append('g')
				.attr('id','axisG')
		
	axisG.append('g')
		.attr('transform','translate(0,'+(h-margin)+')')
		.call(xAxis)
	axisG.append('g')
		.attr('transform','translate('+margin+',0)')
		.call(yAxis)		
}
//画坐标点，数据标记点
	
function renderDots(svg){
	
	data.forEach(function(list){
		svg.append('g')
			.selectAll('circle')
			.data(list)
			.enter()
			.append('circle')
			.attr('class','dot')
			.attr('cx',function(d,i){return xScale(d.x)})
			.attr('cy',function(d,i){return yScale(d.y)})
			.attr('r',4)
			.attr('fill','white')
			.style('stroke','blue')
			
	})
}

//事件监听
d3.select('#Linear')
	.on('click',function(){
		render(d3.curveLinear)
	})
	
d3.select('#LinearClosed')
	.on('click',function(){
		render(d3.curveLinearClosed)
	})

d3.select('#StepBefore')
	.on('click',function(){
		render(d3.curveStepBefore)
	})

d3.select('#StepAfter')
	.on('click',function(){
		render(d3.curveStepAfter)
	})

d3.select('#Basis')
	.on('click',function(){
		render(d3.curveBasis)
	})

d3.select('#BasisOpen')
	.on('click',function(){
		render(d3.curveBasisOpen)
	})
	


</script>
</body>
</html>