当然也可以创建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. Dubbo面试常见问题

    一.dubbo是什么? dubbo是⼀个分布式服务框架,提供⾼性能和透明化的RPC远程服务调⽤⽅案,以及SOA服务治理方案.说白了其实dubbo就是一个远程调用的分布式框架. 二.dubbo的核心服务 ...

  2. 搜索solr

    这是我第一次写博客,没有系统性.专业性,东西很杂,也不知道自己在写些什么. SOA分布式架构,所以,使用solr,搜索层的服务层需要搭建起来.搜索系统的表现层搭建 ,打包方式是war包 域名改变代表系 ...

  3. Coin Slider

    题目描述 You are playing a coin puzzle. The rule of this puzzle is as follows: There are N coins on a ta ...

  4. 微信小程序 封装接口

    1.util-util.js //封装接口 let baseURL = 'http://127.0.0.1:3000/'; //接口路径 let request = function (url, op ...

  5. PHP 的 new static 和 new self

    下面我们举个例子: class Father { public static function getSelf() { return new self(); } public static funct ...

  6. 前端跨域之jsonp

    demo1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. vue 父到子动态传值 子组件实时渲染

    近期项目中需要一个功能,根据选择不同的 团队片区 id 展示不同的数据,团队id 在父组件  数据在子组件中展示. 根据不同的团队 动态渲染数据总览. 父组件: <Cards ref=" ...

  8. Java类的成员之四:代码块.

    3.2类的成员之四:代码块 ①初始化块(代码块)作用:对Java对象进行初始化 ②程序的执行顺序: ③一个类中初始化块若有修饰符,则只能被static修饰,称为静态代码块(static block ) ...

  9. js 邮箱,手机电话验证

    var mail=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; var tel=/^(\d3,4|\d{3,4} ...

  10. Repeatable Read

    在Repeatable Read隔离级别下,一个事务可能会遇到幻读(Phantom Read)的问题. 幻读是指,在一个事务中,第一次查询某条记录,发现没有,但是,当试图更新这条不存在的记录时,竟然能 ...