d3创建多个svg元素

当然也可以创建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)‘);

时间: 2024-10-15 16:28:29

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

用JS动态创建SVG元素并绑定事件

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "800"); svg.setAttribute("height", "500"); svg.addEventListener("load", function () {

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

一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用严格的XML语法描述图形内容.关于它,主机位于麻省理工学院的W3c官网有着全面的介绍(http://www.w3.org/Graphics/SVG/). 上面这张图片展示了位图和矢量图的区别.位图是由点构成的,矢量图则是由一些形状元素构成.该图中显示放大位图可以看到点,而放大矢量图看到的仍然是形状.

d3 根据数据绘制svg

var dataset = [ 5, 10, 15, 20, 25 ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("circle"); circles.attr("cx", function(d, i) { return (i * 50) + 25; }) .attr("cy", h/2) .attr("r"

[D3] 2. Basics of SVG

1. svg should use 'fill' prop instead 'background-color'2. svg width & height no need 'px'3. attr(function(data_val, index){})4. create svg, d3.select('selector').append('svg').attr('width', xxx).attr('height', xx)5. svg should use 'rect' instead of

使用Javascript D3创建属于你的涂鸦作品

Matplotlib可以用来创建很漂亮精确的数学图形: 但是有时候在进行想法交流的时候,不想那么严谨正式,想使用那种轻松的.涂鸦风格的图形: MATLAB XKCDify项目可以用来生成上述的涂鸦作品: https://github.com/slayton/matlab-xkcdify 不过本文将介绍使用Javascript D3库来在线生成你自己的涂鸦作品,这个比安装Matlab要方便得多, 网页界面如下所示,填写你想表达的方程式,涂鸦标题,X/Y轴参数和标签,你还可以通过jQuery UI

在js中使用createElement创建HTML对象和元素 (转)

1.创建链接 <script language="javascript"> var o = document.body; //创建链接 function createA(url,text) { var a = document.createElement("a"); a.href = url; a.innerHTML = text; a.style.color = "red"; o.appendChild(a); } createA(

css27】base标签带有href属性会让chrome里的svg元素url失效

一个chrome的问题,但具体原因不明. 触发条件:chrome浏览器base标签里href属性有值的时候 触发问题:svg里面的元素如果有用url的滤镜和模糊,则会失效,在firefox里和IE10没有发现这个问题. 正常状态: 有base标签且href里值为“.”的时候chrome里的状态:  测试代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>

ECS来创建我们的HTML元素

ECS来创建我们的HTML元素 import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import 

动态创建并访问网页元素

最近在做OCX控件,但这个控件并不是一打开网页就需要初始化的,而是根据需要动态创建:在控件初始化的时候需要在控件内部获取其在网页中的DOM对象:并且创建之后需要立刻调用控件的方法. 最开始的方法如下: 1 var ctrl = document.createElement('object'); 2 ctrl.classid = 'CLSID:DCC16727-7A51-47B4-B38E-B020EAAF0584'; 3 document.body.appendChild(ctrl); 这个方法