当然也可以创建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. Nginx+PHP-FPM远程命令执行_CVE-2019-11043

    漏洞描述 此次漏洞主要由于 PHP-FPM 中 sapi/ fpm/ fpm/ fpm_main.c 文件内的 env_path_info 下溢导致,攻击者可以使用换行符 %0a 破坏 Nginx 中 ...

  2. Makefile中的$(addprefix),添加前缀,指定目标生成目录

    先给大家看段Makefile的代码吧: INCLUDE_DIR=usr/java/jdk1..0_25/include \ usr/java/jdk1..0_25/include/linux INCL ...

  3. sqlserver 将店铺表转换成可以用in查询的字符串

    create TABLE #tempshopt ( shopid varchar(max) ) set @aSql = 'insert into #tempshopt(shopid) select s ...

  4. rem与px的相爱相杀

    rem 简介:为元素设定字体大小:相对大小:只相对HTML根元素. 优点:只修改根元素就可以成比例调整所有字体的大小. bug:IE8及更早版本不兼容. hack:多写一个绝对单位px的声明,不兼容版 ...

  5. delphi 文件操作(信息获取)

    delphi获取Exe文件版本信息的函数 Type TFileVersionInfo = Record FixedInfo:TVSFixedFileInfo; {版本信息} CompanyName:S ...

  6. CF 1082E Increasing Frequency(贪心)

    传送门 解题思路 贪心.对于一段区间中,可以将这段区间中相同的元素同时变成\(c\),但要付出的代价是区间中等于\(c\)的数的个数,设\(sum[i]\)表示等于\(c\)数字的前缀和,Max[i] ...

  7. docker安装(4)

    centos6 docker安装 wget -P /etc/yum.repos.d/ http://mirrors.aliyun.com/repo/epel-6.repo yum install -y ...

  8. [NOIP2016]天天爱跑步 题解(树上差分) (码长短跑的快)

    Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.<天天爱跑步>是一个养成类游戏,需要 玩家每天按时上线,完成打卡任务.这个游戏的地图 ...

  9. 关于“Unknown or unsupported command 'install'”问题解决的小结

    经常需要在COMMAND命令中安装第三方库,有时会碰到“Unknown or unsupported command 'install'”这种报错. 刚开始时,以为是环境变量里面没有配置:PYTHON ...

  10. 带头结点的循环单链表----------C语言

    /***************************************************** Author:Simon_Kly Version:0.1 Date: 20170520 D ...