D3中对svg 分析新增 defs元素 增加each()

each() 方法允许我们定制对选择集中DOM元素的处理行为:

selection . each ( func )

参数 func 是调用者定义的函数,在d3中被称为 访问器/accessor 。 d3将对选择集中的 每一个 DOM对象, 依次 调用该访问器函数。

在调用 访问器 函数时,d3会将 this 指向当前要处理的 DOM对象 , 并传入两个参数:

datum : 当前DOM对象对应的数据

index :当前DOM对象在集合中的序号

可以认为 访问器 是d3流水线中每个处理环节 用户逻辑 的封装接口,d3通过这个接口, 实现了 流水线框架 和 用户处理逻辑 的 解耦 :

const d3Elements = d3Svg.selectAll(‘#dangan-elements‘).data([‘elements‘]);  //图片部分

d3Elements.enter().append(‘g‘).attr(‘id‘, ‘dangan-elements‘);

// svg选中所有class为  elementName 的依次进行处理

var clipBox = d3Elements.selectAll(‘.‘+elementName).data(data).enter()

.append(‘g‘)

.classed(elementName, true)

.classed(d => ({‘dangan-click‘: d.click}))

.attr(‘clip-path‘, (d,i) => `url(#${unique+clipName+i})`)

.each(function(d) {

console.log(d);

}

SVG defs元素

SVG的<defs>元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组,并用<defs>元素来定义它,然后你就可以在SVG图像中将它当做简单图形来重复使用。

<svg xmlns="http://www.w3.org/2000/svg">

<defs>

<g>

<rect x="100" y="100" width="100" height="100" />

<circle cx="100" cy="100" r="100" />

</g>

</defs>

</svg>

在<defs>元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用<use>元素来引入它们。如下面的代码所示:

<svg xmlns="http://www.w3.org/2000/svg">

<defs>

<g id="shape">

<rect x="50" y="50" width="50" height="50" />

<circle cx="50" cy="50" r="50" />

</g>

</defs>

<use xlink:href="#shape" x="50" y="50" />

<use xlink:href="#shape" x="200" y="50" />

</svg>

要引用<g>元素,必须在<g>元素上设置一个ID,通过ID来引用它。<use>元素通过xlink:href属性来引入<g>元素。注意在ID前面要添加一个#。

在<use>元素中,通过x和y属性来指定重用图形的显示位置。注意在<g>元素中的图形的定位点都是0,0,在使用<use>元素来引用它的时候,它的定位点被转换为<use>元素x和y属性指定的位置。

哪些元素可以被定义为defs中的元素呢?

任何图形元素,如:rect,line  g  symbol

1.SVG中的clip-path

SVG中,有个名叫<clipPath>的元素,人如其名,其专门用来定义剪裁路径的。举个简单例子:

<defs><!-- 定义 -->

<clipPath id="clipPath"><!-- 定义剪裁路径 -->

<rect x="0" y="0" width="80" height="80" /><!-- 路径详细 -->

</clipPath>

</defs>

上面的<clipPath>定义了一个80*80的矩形剪裁路径。OK,假设现在SVG中有个圆,SVG代码如下:

<circle cx="60" cy="60" r="50" fill="#34538b" />

按照我们浅显的认识,应该会出现一个填充某种颜色的圆。

SVG一个普通的圆

但是,如果此时该圆同时设置了clip-path属性,且值指向的就是上面定义的剪裁路径#clipPath呢?

<circle cx="60" cy="60" r="50" fill="#34538b" clip-path="url(#clipPath)" />

则,十五的圆被剪裁成了银杏叶:

剪裁之后的效果

跟<g>, <symbol>等元素类似,<clipPath>元素里面除了rect元素, 还可以是circle, ellipse, line, polyline, polygon, ...等等,甚至是text文本。

<svg>

<defs>

<clipPath id="clipPath">

<text x="10" y="50" style="font-size: 20px;">一步之遥</text>

</clipPath>

</defs>

<g style="clip-path: url(#clipPath);">

<circle cx="60" cy="60" r="50" fill="#34538b" />

<rect x="0" y="0" width="60" height="90" style="fill:#cd0000;"/>

</g>

</svg>

http://www.zhangxinxu.com/wordpress/2014/12/css3-svg-clip-path/

2. enter().append("rect").append("rect")

添加的第二个rect 是在第一个的基础里添加的

相当于<rect>

<rect></rect>

</rect>

例    <p>Hello World 1</p>

<p>Hello World 2</p>

<script>

var width = 300; //画布的宽度

var height = 300; //画布的高度

var svg = d3.select("body") //选择文档中的body元素

.append("svg") //添加一个svg元素

.attr("width", width) //设定宽度

.attr("height", height); //设定高度

var dataset = [ 250 , 210 , 170 , 130 , 190 ];

var rectHeight = 25; //每个矩形所占的像素高度(包括空白)

svg.selectAll("rect")

.data(dataset)

.enter()

.append("rect")

.attr("x",20)

.attr("y",function(d,i){

return i * rectHeight;

})

.attr("width",function(d){

return d;

})

.attr("height",rectHeight-2)

.attr("fill","steelblue")

.append("rect")

.attr("x",20)

.attr("y",function(d,i){

return i * rectHeight;

});

</script>

时间: 2024-11-03 16:27:04

D3中对svg 分析新增 defs元素 增加each()的相关文章

[2] D3.js中如何使用数据和选择元素

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论. 接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat&qu

html5中form表单新增属性以及改良的input标签元素的种类

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" /> <!-- 在不支持h5的浏览器中,可以用CSS样式进行改写 --> &

jquery中动态新增的元素节点无法触发事件解决办法

在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效. 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点lo

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: ? 1 2 3 4 5 6 7 8 9 10 11 <p id="pLabel">新加一条</p> <ul id="ulLabel">  <li class="liLabel">aaa1</li>  <li class="li

寻找数组中的第K大的元素,多种解法以及分析

遇到了一个很简单而有意思的问题,可以看出不同的算法策略对这个问题求解的优化过程.问题:寻找数组中的第K大的元素. 最简单的想法是直接进行排序,算法复杂度是O(N*logN).这么做很明显比较低效率,因为不要求别的信息只要计算出第K大的元素.当然,如果在某种情况下需要频繁访问第K大的元素就可以先进行一次排序在直接得出结果. 第一种方式是这样,用选择排序,冒泡法,或者交换排序这类的排序,对前K个元素进行排序.这三种算法也许不是最快的排序算法.但是都有个性质:计算出最大(小)的元素的算法复杂度是O(N

每天一个JavaScript实例-从js脚本中访问object元素中的SVG

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-从js脚本中访问object元素中的SVG</title> <style> </style> </head> &l

HTML5中新增的元素

大家都知道HTML5是最新的版本,其中增加了很多老版本没有的新元素,下面就是归纳的新元素: article    定义外部内容,可以使外部的一篇文章或来自bolg的文本或者是来自论坛的文本 aside     定义article以为的内容,aside的内容应与article的内容相关 audio    定义声音,音频 canvas    定义图形,如图表或者其他图像 command     定义命令按钮,比如单选按钮,复选框或按钮 datails    用于描述文档或文档的某个细节,与summa

HTML5中的SVG

* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名为".svg" * SVG使用的是XML语法 * 概念 * SVG是一种使用XML技术描述二维图形的语言 * SVG的特点 * SVG绘制图形可以被搜索引擎抓取 * SVG在图片质量不下降的情况下,被放大 * SVG与Canvas的区别 * SVG * 不依赖分辨率 * 支持事件绑定 *

HTML5之新增的元素

今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大赛的初赛>.我被我们老师拉去做了义工-----计时员.看了所有老师的比赛,虽然都特别好,但是让我印象深刻的还是一个HTMl5+CSS3的课程.看到那种炫酷的效果,我瞬间都被吸引住了.所以忙完了手头上的作业,就从别人那里要到了HTML5的教程,开始了我的学习HTML5之路.虽然看了6节课了,还是没有学到老