<!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. hihoCoder挑战赛14 -1223

    描述 给定n个关于X的不等式,问最多有多少个成立. 每个不等式为如下的形式之一: X < C X <= C X = C X > C X >= C 输入 第一行一个整数n. 以下 ...

  2. hdu 1181 变形课

    变形课 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total Submis ...

  3. javascript优化--04高质量编码

    库和API的设计: 在参数设计中保持好的习惯:如顺序,width,height;top,right,bottom,left;如命名: 将undefined看作没有值而不要表示非特定的值: 在允许0,空 ...

  4. Prim POJ 2031 Building a Space Station

    题目传送门 题意:给出n个三维空间的球体,球体是以圆心坐标+半径来表示的,要求在球面上建桥使所有的球联通,求联通所建桥的最小长度. 分析:若两点距离大于两半径和的长度,那么距离就是两点距离 - 半径和 ...

  5. ural 1247. Check a Sequence

    1247. Check a Sequence Time limit: 0.5 secondMemory limit: 64 MB There is a sequence of integer numb ...

  6. 匈牙利命名法——命名规范(知道这些再看Windows程序就轻松多了)

    匈牙利命名法著名的命名规则当推Microsoft公司的"匈牙利"法,该命名规则的主要思想是"在变量和函数名中加入前缀以增进人们对程序的理解".例如所有的字符变量 ...

  7. 分布式流式处理框架：storm简介 + Storm术语解释

    简介: Storm是一个免费开源.分布式.高容错的实时计算系统.它与其他大数据解决方案的不同之处在于它的处理方式.Hadoop 在本质上是一个批处理系统,数据被引入 Hadoop 文件系统 (HDFS ...

  8. JavaScript 变量、函数与原型链

    定义 || 赋值 1-函数的定义 函数定义的两种方式: “定义式”函数:function fn(){ alert("哟,哟!"); } “赋值式”函数:var fn = funct ...

  9. POJ 2342 (树形DP)

    题目链接: http://poj.org/problem?id=2342 题目大意:直属上司和下属出席聚会.下属的上司出现了,下属就不能参加,反之下属参加.注意上司只是指直属的上司.每个人出席的人都有 ...

  10. 修改setInterval作用域

    Hello,今天和大家分享如何修改setInterval作用域. 0.引子 最近在做一个项目的时候需要开发一个图片轮播显示的组件,在实现过程中遇到了关于setInterval作用域的问题. Slide ...