D3生成柱形图添加鼠标事件(一）

最新推荐文章于 2022-03-27 21:02:50 发布

程序员猪猪侠

最新推荐文章于 2022-03-27 21:02:50 发布

阅读量2.3k

点赞数

分类专栏： d3 文章标签： d3.js 鼠标

d3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

直接上代码，这是动态生成的柱形图，并添加了鼠标事件

<html>  
  <head>  
        <meta charset="utf-8">  
        <title>8.1.1 鼠标交互</title>  
  </head> 
  <style>
  
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
 
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

  </style>
<body>

<script src="../../d3/d3.v4.js" charset="utf-8"></script> 

<script>  

var dataset = [50, 43, 120, 87, 99, 167, 142];

var width  = 400;	//SVG绘制区域的宽度
var height = 400;	//SVG绘制区域的高度
	
var svg = d3.select("body")			//选择<body>
			.append("svg")			//在<body>中添加<svg>
			.attr("width", width)	//设定<svg>的宽度属性
			.attr("height", height);//设定<svg>的高度属性
			
//x轴宽度
var xAxisWidth = 300;

//y轴宽度
var yAxisWidth = 300;
			
//x轴比例尺
var xScale = d3.scaleBand()
				.domain(d3.range(dataset.length))
				.range([0,xAxisWidth]);

//y轴比例尺
var yScale = d3.scaleLinear()
				.domain([0,d3.max(dataset)])
				.range([0,yAxisWidth]);			
	
//外边框
var padding = { top: 30 , right: 30, bottom: 30, left: 30 };

var rect = svg.selectAll("rect")
				.data(dataset)		//绑定数据
				.enter()			//获取enter部分
				.append("rect")	//添加rect元素，使其与绑定数组的长度一致
				.attr("fill","steelblue")		//设置颜色为steelblue
				.attr("x", function(d,i){		//设置矩形的x坐标
					return padding.left + xScale(i);
				})
				.attr("y", function(d){		//设置矩形的y坐标
					return height- padding.bottom - yScale(d);
				})
				.attr("width",xScale.bandwidth())		//设置矩形的宽度
				.attr("height",function(d){	//设置矩形的高度
					return yScale(d);
				})
				.on("mouseover",function(d,i){
					d3.select(this)
					  .attr("fill","yellow");
				})
				.on("mouseout",function(d,i){
					d3.select(this)
					  .transition()
					  .duration(500)
					  .attr("fill","steelblue");
				});
				
var text = svg.selectAll("text")
				.data(dataset)			//绑定数据
				.enter()				//获取enter部分
				.append("text")			//添加text元素，使其与绑定数组的长度一致
				.attr("fill","white")
				.attr("font-size","14px")
				.attr("text-anchor","middle")
				.attr("x", function(d,i){
					return padding.left + xScale(i);
				})
				.attr("y", function(d){
					return height- padding.bottom - yScale(d);
				})
				.attr("dx",xScale.bandwidth()/2)
				.attr("dy","1em")
				.text(function(d){
					return d;
				});

var xAxis = d3.axisBottom(xScale);
				

yScale.range([yAxisWidth,0]);
				
var yAxis = d3.axisLeft(yScale);
				
				
svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) +  ")")
		.call(xAxis);
			
svg.append("g")
		.attr("class","axis")
		.attr("transform","translate(" + padding.left + "," + (height - padding.bottom - yAxisWidth) +  ")")
		.call(yAxis); 
	
</script> 

</body>

</html>

程序员猪猪侠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
D3生成柱形图添加鼠标事件(一）

直接上代码 8.1.1 鼠标交互 .axis path,.axis line{ fill: none; stroke: black; shape-rendering: crispEdges;} .axis text { font-family: sans-serif; font-size: 11px;
复制链接

扫一扫