D3.js -- 图片制作

最新推荐文章于 2025-06-08 09:02:33 发布

原创最新推荐文章于 2025-06-08 09:02:33 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#d3 #svg #柱状图

D3 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用D3.js结合SVG绘制简单的柱状图，包括比例尺设置、坐标轴绘制及数据绑定等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

D3利用了HTML5中的SVG和Canves来制作图形。

SVG：指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式。

特点：

SVG 绘制的是矢量图，因此对图像进行放大不会失真。
基于 XML，可以为每个元素添加 JavaScript 事件处理器。
每个图形均视为对象，更改对象的属性，图形也会改变。
不适合游戏应用

Canvas ：通过 JavaScript 来绘制 2D 图形。

特点：

绘制的是位图，图像放大后会失真。
不支持事件处理器。
能够以 .png 或 .jpg 格式保存图像
适合游戏应用

SVG预定义的元素有：

矩形<rect>

圆形</circle>

椭圆<ellipse>

线段<line>

折线<polyline>

多边形<polygon>

路径<path>

svg制作柱状图

var relevanceObj = d3.select("#relevanceRuleConfig");
var svg = relevanceObj.append("svg").attr("width",width-26).attr("height",height-75);//创建画布
//画布周边的空白
var padding = {left:30, right:30, top:20, bottom:20};
//数据
var relevanceData = ["100","140","300","200","270"];	
//x轴的序列比例尺
var xScale = d3.scale.ordinal()
	   .domain(d3.range(relevanceData.length))	//设置比例起始值
	   .rangeRoundBands([0, 200]);			//设置比例映射

//y轴的线性比例尺
var yScale = d3.scale.linear()
	   .domain([0,d3.max(relevanceData)])
	   .range([300, 0]);				//因为y周正方向朝下，所以倒着映射比例
//添加矩形
var rect = svg.selectAll("rect")
	.data(relevanceData)				//绑定数据
	.enter()					//返回选择集enter部分
	.append("rect")					//添加足够的矩形
	.attr("transform","translate(" + padding.left + "," + padding.top+")")//定义2D转换，相当于绝对定位
	.attr("x",function(d,i){	
			return xScale(i);		//矩形宽度起始值
		})
	.attr("y",function(d,i){
			return yScale(d);		//矩形高度起始值
		})
	.attr("width",xScale.rangeBand()-5)		//矩形宽度
		.attr("height",function(d){
			return 300-yScale(d);		//矩形高度
		})
	.attr("fill","steelblue");			//为矩形填充颜色
//为每个矩形添加文字
var texts = svg.selectAll("text")
    	.data(relevanceData)
    	.enter()
    	.append("text")
    	.attr("x", function(d,i){	//文本x轴起始位置
    		return xScale(i);
    	} )
    	.attr("y",function(d){		//文本y轴起始位置
    		return yScale(d);
    	})
    	.attr("dx",function(){		//相对于x轴起始位置的偏移量
    		return (xScale.rangeBand()-5);
    	})
    	.attr("dy",function(d){		//相对于y轴起始位置的偏移量
    		return 30;
    	})
    	.text(function(d){
    			return d;
    	});

//定义x轴
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
//定义y轴
var yAxis = d3.svg.axis().scale(yScale).orient("left");       
	
//添加坐标轴
svg.append("g").attr("class","axis")
	.attr("transform","translate(" + padding.left + "," + (340 - padding.bottom) + ")")
	.call(xAxis); 
svg.append("g").attr("class","axis")
	.attr("transform","translate(" +padding.left+ "," + padding.top + ")")
	.call(yAxis);

效果图：