当然也可以创建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. navigator对象-了解

    navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent ,该属性可以返回由客户机发送服务器的 user-agent 头部的值 下面前段代码可以判断用户使用哪个终 ...

  2. webpack 集成 Typescript && Less

    webpack 集成 Typescript && Less TypeScript是JavaScript的一个类型化的超集,可以编译成纯JavaScript,在本指南中,我们将学习如何将 ...

  3. laravel ajax提交报错Symfony\Component\HttpKernel\Exception\HttpException

    出现此种错误,通常是没有提交安全验证 params = { id: 2, _token: '{{ csrf_token() }}' } function cancel() { var url = &q ...

  4. Uninstall NetBeans

    There will be a file named uninstall.sh in /usr/local/netbeans-x.x if you installed netbeans with ro ...

  5. [CQOI2014]数三角形 题解(找规律乱搞)

    题面 其实这道题不用组合数!不用容斥! 只需要一个gcd和无脑找规律(滑稽 乍一看题目,如果单纯求合法三角形的话情况太多太复杂,我们可以从局部入手,最终扩展到整体. 首先考虑这样的情况: 类似地,我们 ...

  6. CSS:CSS 分组 和 嵌套 选择器

    ylbtech-CSS:CSS 分组 和 嵌套 选择器 1.返回顶部 1. CSS 分组 和 嵌套 选择器 Grouping Selectors 在样式表中有很多具有相同样式的元素. h1 { col ...

  7. 模拟栈&&模拟队列

    模拟栈:class Stack { private List list = new ArrayList( ); public void push( Object obj ) { this.list.a ...

  8. delphi基础篇之数据类型之二:2.字符串类型

    2.字符串类型 2.1.ShortStringShortString 又称为短字符串(相对的,Ansistring.widestring.unicodestring 称为长字符串),其实质上是一个编译 ...

  9. git分布式版本控制系统权威指南学习笔记(六):git reset、get stash、git checkout总结

    文章目录 1. 概述 2. 如何把修改暂存起来,留着以后使用? 2.1 使用场景 2.2 git stash 暂存进度 2.3 查看进度 2.4 恢复进度 3. 如何撤销工作区的修改? 4. 如何把暂 ...

  10. 2019牛客多校第三场F-Planting Trees(单调队列)

    Planting Trees 题目传送门 解题思路 枚举每一个下边界,再枚举其对应的所有上边界,求出其对应区间内的最大最小值,当下边界一样的时候,其最大最小值可以随着上边界减小逐步更新.然后将这些最大 ...