D3.js -- 图片制作

来源：互联网发布：gltools优化王者编辑：程序博客网时间：2024/05/16 08:06

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);

效果图：

0 0