SVG基础图形和D3.js

更新日期: 2019-04-15阅读: 2.6k标签: svg

学习如何使用D3.js来创建这些图形?这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性。


使用D3.js画一个SVG 的 圆 circle

可以使用如下代码创建:

<svg width="50" height="50">
    <circle cx="25" cy="25" r="25" fill="purple" />
</svg>

我们在前面的章节已经讲过了使用D3.js来创建SVG圆形。

var jsonCircles = [
{"x_axis":30,"y_axis":30,"radius":20,"color":"greeen"},
{"x_axis":70,"y_axis":70,"radius":20,"color":"purple"},
{"x_axis":110,"y_axis":100,"radius":20,"color":"red"}   
];
 
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
 
var circles =svgContainer.selectAll("circle")
.data(jsonCircles)
.enter()
.append("circle");
 
var circleAttributes = circles
.attr("cx",function(d){return d.x_axis;})
.attr("cy",function(d){return d.y_axis;})
.attr("r",function(d){return d.radius;})
.style("fill",function(d){return d.color;});


将上述例子化简后,可以看做这一过程为两步:

创建SVG容器(SVG坐标空间)
画圆形

因此,在最简单的情况,JavaScript代码为:

//创建一个SVG容器
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
 
//画圆形
var circle = svgContainer.append("circle")
.attr("cx",30)
.attr("cy",30)
.attr("r",20);

画圆的时候,必须的SVG属性是:“cx”、“cy”以及“r”。

注意——如果我们缺省了“style”-样式函数,那么我们得到的就是一个黑色的圆形。不过也还好,因为首要的是先画出来圆形,之后在考虑的是样式。

在此要强调的是,使用D3.js画SVG的圆形时,最为重要的属性是:cx,cyr


使用D3.js画SVG的 长方形 Rectangle

我们可以用下面的代码画出一个长方形:

<svg width="50" height="50">
<rect x="0" y="0" width="50" height="50" fill="green"/>
</svg>

通过前面的圆形例子,我们大概可以猜得出,创建一个长方形,必须的是“x”,"y","width"以及"height".

我们也可以把画长方形分成两步:

创建一个SVG容器(SVG坐标空间)
画长方形

因此,在最简单的情况下,我们的JavaScript代码如下:

//创建一个SVG容器
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
 
//画长方形
var rectangle = svgContainer.append("rect")
.attr("x",10)
.attr("y",10)
.attr("width",50)
.attr("height",100);

画长方形的必须属性是“x”、"y"、"width"以及"height"。注意—同上,如果缺省Style()方法,得到的是黑色的长方形。

两个需要注意的点是:

SVG中指代长方形(rectangle)的关键词是rect。因此我们写的是.append("rect")而不是.append("rectangle")。
SVG坐标系统的布局中,高height是自上而下的。

在此要强调的是,使用D3.js画SVG的长方形时,最为重要的属性是:x,y,widthheight


使用D3.js画SVG的 直线 Straight Line

使用下面的代码可以创建直线:

<svg width="50" height="50">
    <line x1="5" y1="5" x2="40" y2="40" stroke="grey" stroke-width="5" />
</svg>

同样的,我们大概猜到画直线必须的是:"x1","y1","x2","y2".我们同样可以分为两步:

创建SVG容器(SVG坐标空间)
画直线

最简单的例子为:

//创建SVG容器
var svgContainer = d3.aelect("body").append("svg")
.attr("width",200)
.attr("height",200);
 
//画直线
var line = svgContainer.append("line")
.attr("x1",5)
.attr("y1",5)
.attr("x2",50)
.attr("y2",50)

我们画的直线在哪了???SVG元素就在那里,但是我们却看不到。这是因为SVG的“line”元素就仅仅是“线",在几何学上讲是一维的,他是没有大小粗细的,没有所谓的“内部”。

这也就是说,“line”元素不可能被“填充(filled)”(即fill属性)。也就是说,直线是不占用空间的——因此实际上,我们什么都看不到。

为了解决这个问题,我们需要确保:

.attrbute("stroke-width",NUMBER),其中的NUMBER是指直线的宽
.attribute("stroke","COLOR"),其中COLOR是指用来给直线着色的颜色

因此,修改后的最简例子为:

//创建一个SVG容器
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200);
 
//画直线
var line = svgContainer.append("line")
.attr("x1",5)
.attr("y1",5)
.attr("x2",50)
.attr("y2",50)
.attr("stroke","black")
.attr("stroke-width",2);

太棒了!现在看的到啦!画直线必须的SVG属性是"x1","y1","x2","y2","stroke"以及"stroke-width"。

注意-这里我们没有使用style方法,因为‘line’元素只是‘线’而已,没有“内部”可言,也就没有什么填充色之类的,在几何学上将,它是一维的。所以,我们在设置其样式的时候,就需要设置“stroke”颜色以及“stroke-width”。

使用D3.js画折线和多边形

在基本图形中,我们还应该画“折线(polyline)”和“多边形(polygon)”。可以通过下面的代码创建SVG折线和多边形:

折线 代码:

<svg width="50" height="50">
  <polyline fill="none" stroke="blue" stroke-width="2"
    points = "05,30
               15,30
               15,20
               25,20
               35,10 "/>
</svg>

多边形 代码:

<svg width="50" height="50">
  <polygon fill="yellow" stroke="blue" stroke-width="2"
    points="05,30
    15,30
    25,20
    25,10
    35,10" />
</svg>

通过上面这些圆形、长方形、直线的例子,你大概能猜到,要创建一个折线 和 多边形 图形,需要的属性是:“stroke”、“stroke-width”以及“points”。对于多边形Polygon还需要“fill”属性。然而,正如你所看到的,points属性包含了一个点(point)列表,其中节点的x,y值由逗号隔开,每对坐标值之间通过空格隔开。

这样做很不美观。D3.js热衷于数据可视化以及美好的事物,d3.js的惯例是使用D3.svg.line()生成器来画折线和多边形。为了能够使用D3.js创建SVG基本图形折线(Polyline)和多边形(Polygon),我们将必须学习SVG Paths。


链接: https://www.fly63.com/article/detial/2896

如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著! SVG(可缩放的矢量图形)完美地解决了上文中提到的部分问题。

如何在vue项目中优雅地使用SVG

安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,在static下新建svg文件夹,用来放置当做icon使用的svg,使用include,include和img做区分。然后修改webpack.base.conf.js配置,这样svg-sprite-loader只会处理我们指定的static/svg下的文件

封装全局icon组件 svg (仿造element-ui源码)

引入 svg-sprite-loader 插件,vue-cli项目默认情况下会使用 url-loader 对svg进行处理,会将它放在/img 目录下,所以这时候我们引入svg-sprite-loader 会引发一些冲突。使用 webpack 的 exclude和 include

通过css改变svg img的颜色

一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?但是为了更小的开销,一般css为更好的解决方案

一步步教你用 CSS 为 SVG 添加过滤器

SVG就存在了,但仍有一些有趣的方法去用它。在本教程中,重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像,我将向你展示如何将它们应用于任何常规页面的内容上。实际上我们是通过告诉 CSS 过滤器所拥有的 ID,然后再把过滤器应用于 SVG 的方式来实现。

关于Data URLs svg图片显示出错和浏览器URL hash #

在使用生成的svg图作为<img>标签是src值时,发现有部分浏览器显示异常,所以这里记录下,在<img src=\\\"Data URLs\\\">中,Data URLs格式与显示情况如下:

巧妙运用clip-path,实现CSS形状变换

CSS3的clip-path,这个clip-path看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做出许多不同的形状,让底色或底图显现,随着浏览器对于CSS3的支持度大幅提升

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。

svg插入foreignObject无法响应事件

svg中可以通过foreignObject嵌入html,展示更丰富的样式。当需要给这中间的html绑定事件的时候,不管是使用委托和直接查询元素进行绑定的时候都无法生效。右键检查元素也检查不到具体的元素

svg的path的应用

我们这里只要用到M L A 和Z命令就可以了,M L 和Z命令比较简单,这里详细讲解A命令,A命令是画弧的命令,里面的A命令有 7个参数:rx ry x-axis-rotation large-arc-flag sweep-flag x y

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!