<!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. 输入文本框，当点击enter时，做进一步处理！

    //登录用户文本框敲回车键 private void txtCode_KeyDown(object sender, KeyEventArgs e) { if (e.KeyCode == Keys.En ...

  2. error opening trace file: No such file or directory (2) ,can't load transform_config.xml

    出现这个错误:error opening trace file: No such file or directory (2) ,can't load transform_config.xml 是因为没 ...

  3. LoadRunner中取Request、Response

    LoadRunner中取Request.Response LoadRunner两个“内置变量”: 1.REQUEST,用于提取完整的请求头信息. 2.RESPONSE,用于提取完整的响应头信息. 响应 ...

  4. Python核心模块——urllib模块

    现在Python基本入门了,现在开始要进军如何写爬虫了! 先把最基本的urllib模块弄懂吧. urllib模块中的方法 1.urllib.urlopen(url[,data[,proxies]]) ...

  5. BZOJ4340 : BJOI2015 隐身术

    枚举$B$串的每个后缀,统计出该后缀所有满足条件的前缀. 考虑暴力搜索,设状态$(x,y,z)$表示当前需要考虑$A$从$x$开始的后缀,$B$从$y$开始的后缀,之前部分编辑距离为$z$. 那么首先 ...

  6. BZOJ2675 : Bomb

    首先通过不断翻转坐标系,假设三个点以横坐标为第一关键字,纵坐标为第二关键字排序后A在B前面,B在C前面. 那么只需要处理以下两种情况: 1.B的纵坐标在AC之间,这时三个点的距离和为$2((x_C+y ...

  7. BZOJ2530 : [Poi2011]Party

    注意到随机一组贪心解得到的团的大小不小于$\frac{N}{3}$的概率是很大的,所以一直随机下去,直到找到一组解即可,随机次数是常数级别的,所以复杂度为$O(n^2)$. #include<c ...

  8. 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了！像console.log()可以向控制台输出图片

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  9. TYVJ P1072 bomb Label：看不懂题意

    描述 一场战争正在A国与B国之间如火如荼的展开.B国凭借其强大的经济实力开发出了无数的远程攻击导弹,B国的领导人希望,通过这些导弹直接毁灭A国的指挥部,从而取得战斗的胜利!当然,A国人民不会允许这样的 ...

  10. WebRTC手记之本地视频采集

    转载请注明出处:http://www.cnblogs.com/fangkm/p/4374610.html 前面两篇文章介绍WebRTC的运行流程和使用框架接口,接下来就开始分析本地音视频的采集流程.由 ...