<!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. Dialog对话框

    1.显示内容 AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.setTitle(&q ...

  2. 海贼王之——梦想音乐

      相信和很多海粉一样,对伙伴的关照和战斗,是相当地震撼.   好东西时不时地听一下,然后感受那种刷新全身表层细胞,触电...:   音乐链接: http://v.youku.com/v_show/i ...

  3. ubuntu桌面进不去，我跪了

    ubuntu12.04 输入密码正确,但仍然跳回到登陆界面,实在受不了啊! 不知道bug再哪里,但是有个方法真是屡试不爽啊.. ctrl+alt+f1切换到字符界面 /home/xxx/.Xautho ...

  4. BZOJ4155 : [Ipsc2015]Humble Captains

    第一问最小割,第二问: 设du[i]表示i点的度数,则要最小化$\frac{|1集合的du[i]之和-2集合的du[i]之和|}{2}$, 压位01背包即可. #include<cstdio&g ...

  5. HDU 1533 & KM模板

    题意 求二分图最小完备匹配. SOL 建个图那么方便的事情是吧...然后边权都是正的(好像根边权也没什么关系),既然要求最小那么把边权取个相反数跑个KM就好了.. CODE: /*========== ...

  6. POJ 3352 (边双连通分量)

    题目链接: http://poj.org/problem?id=3352 题目大意:一个连通图中,至少添加多少条边,使得删除任意一条边之后,图还是连通的. 解题思路: 首先来看下边双连通分量的定义: ...

  7. Windows Phone 7 播放视频

    在Windows Phone 7中播放视频有两种方式,一种是使用MediaElement 控件来播放,一种是使用启动器MediaPlayerLanucher来实现视频的播放.用MediaElement ...

  8. 【BZOJ】3709: [PA2014]Bohater（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3709 很水的题...但是由于脑洞小..漏想了一种情况.. 首先显然能补血的先杀.. 然后杀完后从补血 ...

  9. 【SPOJ】7258. Lexicographical Substring Search（后缀自动机）

    http://www.spoj.com/problems/SUBLEX/ 后缀自动机系列完成QAQ...撒花..明天or今晚写个小结? 首先得知道:后缀自动机中,root出发到任意一个状态的路径对应一 ...

  10. POJ 3691 DNA repair(AC自动机+DP)

    题目链接 能AC还是很开心的...此题没有POJ2778那么难,那个题还需要矩阵乘法,两个题有点相似的. 做题之前,把2778代码重新看了一下,回忆一下当时做题的思路,回忆AC自动机是干嘛的... 状 ...