当然也可以创建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. HTML CSS的中英文对照

    python 大蟒蛇 downloads 下载 install 安装 customize 自定义 path 环境变量:路径 optional 可选的 feature 特性特点 documentatio ...

  2. cordova-plugin-alipay-v2使用篇(更新至20170725)(亲测可用)

    cordova-plugin-alipay-v2使用篇(更新至20170725)(亲测可用) alipaySdk已更新至20170725版本 支付宝WS_APP_PAY_SDK_BASE_2.0 &l ...

  3. 服务器安装宝塔linux系统控制面板

    一.使用远程连接软件 (如 Putty.XShell) 连接你的Linux服务器,本教程以 Putty 为例. 1   启动 Putty.exe 程序,进入 Putty 主界面. 2  在 Host ...

  4. git 分支相关操作

    git status  查看当前工作区 会显示分支 如下 D:\工程\vue_study\testplat_vue>git statusOn branch masternothing to co ...

  5. leetcode-168周赛-1297-子串的最大出现次数

    题目描述: 自己的提交: class Solution: def maxFreq(self, s: str, maxLetters: int, minSize: int, maxSize: int) ...

  6. 【原理】RabbitMQ架构图

    Broker:它提供一种传输服务,它的角色就是维护一条从生产者到消费者的路线,保证数据能按照指定的方式进行传输, Exchange:消息交换机,它指定消息按什么规则,路由到哪个队列. Queue:消息 ...

  7. Shiro学习(9)JSP标签

    Shiro提供了JSTL标签用于在JSP/GSP页面进行权限控制,如根据登录用户显示相应的页面按钮. 导入标签库 Java代码   <%@taglib prefix="shiro&qu ...

  8. [bzoj2839]集合计数 题解 (组合数+容斥)

    Description 一个有N个元素的集合有2^N个不同子集(包含空集),现在要在这2^N个集合中取出若干集合(至少一个),使得 它们的交集的元素个数为K,求取法的方案数,答案模1000000007 ...

  9. Java习题10.24

    Java习题10.24 1. 1,3.connect()与accept():这两个系统调用用于完成一个完整相关的建立,其中connect()用于建立连接.accept()用于使服务器等待来自某客户进程 ...

  10. 戏说 .NET GDI+系列学习教程(三、Graphics类的应用_打印收银小票)

    #region 打印 /// <summary> /// 打印字符串内容 /// </summary> /// <returns></returns> ...