<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title>D3 tutorial</title>
<!--
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-->
<script src="d3.min.js" charset="utf-8"></script>

<style type="text/css">

</style>
</head>
<body>

<script >

// circle

//圆心x坐标 cy圆心y坐标 r半径

var margin = 50,
width = 1200,
height = 800;

var svgrange=d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", function() { return "#a3b466"; });

var circleNum=1000;
var N=1;
for(N;N<=circleNum;N++){

svgrange.append("circle")
.attr("cx", function() { return 50+Math.round(Math.random())*7.5+Math.round(Math.random())*385+N*Math.round(Math.random()); })
.attr("cy", function() { return 40+56.34*Math.round(Math.random())*Math.round(Math.random()*5.30); })
.attr("r", function() { return Math.round(Math.random()*2.14)*15; })
.attr("stroke", function() { return "orange"; })
.style("fill", function() { return getColorRandom() ; });

console.log( Math.random());

//.text(function(d){return Math.round(circleNum)});
}

//var color1 = d3.rgb(40,80,0);
function getColorRandom(){

var tmp=Math.random()*1000;
while(tmp>255){
tmp=Math.random()*1000;
}
var r= tmp;

tmp=Math.random()*1000;
while(tmp>255){
tmp=Math.random()*1000;
}
var g= tmp;

tmp=Math.random()*1000;
while(tmp>255){
tmp=Math.random()*1000;
}
var b= tmp;

return d3.rgb(r,g,b);
}

</script>

</body>
</html>

random circle的更多相关文章

  1. 在UITouch事件中画圆圈-iOS8 Swift基础教程

    这篇教程主要内容展示如何利用Core Graphics Framework画圆圈,当用户点击屏幕时随机生成不同大小的圆,这篇教程在Xcode6和iOS8下编译通过. 打开Xcode,新建项目选择Sin ...

  2. android开发第一天

    今天可以说是我正式投入android怀抱的第一天吧,按着自己的兴趣,努力地吸取知识.听了程老师的课,也觉得收获很多,毕竟以前都是看着书本或者网页教程来学习,第一次有人这么直接地跟你教授着,说着一些你听 ...

  3. canvas+js实现荧光字符效果

    一个小玩意,代码来源于网络. 效果图如下 代码如下 <html> <head> <style> * { margin: 0; padding: 0; } html, ...

  4. 2017 CCPC秦皇岛 M题 Safest Buildings

    PUBG is a multiplayer online battle royale video game. In the game, up to one hundred players parach ...

  5. Openlayers3 WebGis二次开发包实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs& ...

  6. WebGis二次开发包实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs& ...

  7. 心理学实验程序编程（python）

    任务一:实现简单的屏幕的颜色之间的切换 import pygame from pygame.locals import * pygame.init() win = pygame.display.set ...

  8. 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？

    本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...

  9. [Swift]LeetCode478. 在圆内随机生成点 | Generate Random Point in a Circle

    Given the radius and x-y positions of the center of a circle, write a function randPoint which gener ...

随机推荐

  1. Spring的replace-method标签

    Spring的解析源码 public void parseReplacedMethodSubElements(Element beanEle, MethodOverrides overrides) { ...

  2. js:语言精髓笔记7----原型继承

    面向对象有三个基本特性:封装,继承,多态:如果都满足的话称为面向对象语言:而部分满足则称为基于对象语言: 数据类型实现模型描述: JavaScript对象模型: 构造过程:函数->构造器 构造器 ...

  3. 在VMware Workstation上安装Kali Linux

    在VMware Workstation上安装Kali Linux VMware Workstation是一款功能强大的桌面虚拟计算机软件.该软件允许用户在单一的桌面上同时运行不同的操作系统,并且可以进 ...

  4. TFS2012团队管理基本配置及基础使用方法

    本文介绍如何在VS2012中使用微软提供的TFS2012服务器进行团队协作开发,免费默认只支持5用户,主要分为两大步服务器配置跟客户端配置. 转载请标注:http://www.kwstu.com/Ar ...

  5. 寒冰王座[HDU1248]

    寒冰王座 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  6. USACO 5.4 Betsy's Tour(暴力)

    水过,水过,这个程序跑7,跑5分钟左右把... /* ID: cuizhe LANG: C++ TASK: betsy */ #include <iostream> #include &l ...

  7. oracle函数listagg的使用说明(分组后连接字段)

    关于oracle函数listagg的使用说明 工作中经常遇到客户提出这样的需求,希望在汇总合并中,能够把日期逐个枚举出来. 如图,原始数据是这样的: 客户希望能够实现这样的汇总合并: 那么通常我会使用 ...

  8. iOS中--NSArray调用方法详解 (李洪强)

    下面的例子以     NSArray *array = [NSArray arrayWithObjects:@"wendy",@"andy",@"to ...

  9. CSS3时钟式进度条

    CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度.友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了:实际使用中不会出现这样的问题. <!DOCT ...

  10. hello world 驱动程序编写

    操作系统课程设计选题  驱动程序的编写和安装. 经过一天多的努力,终于把我的第一个驱动程序模块成功编写并实现插入内核和移除,在这里把过程记录下来方便以后查看,也给其他为之困扰的朋友一个建议. 环境: ...