random circle
<!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的更多相关文章
- 在UITouch事件中画圆圈-iOS8 Swift基础教程
这篇教程主要内容展示如何利用Core Graphics Framework画圆圈,当用户点击屏幕时随机生成不同大小的圆,这篇教程在Xcode6和iOS8下编译通过. 打开Xcode,新建项目选择Sin ...
- android开发第一天
今天可以说是我正式投入android怀抱的第一天吧,按着自己的兴趣,努力地吸取知识.听了程老师的课,也觉得收获很多,毕竟以前都是看着书本或者网页教程来学习,第一次有人这么直接地跟你教授着,说着一些你听 ...
- canvas+js实现荧光字符效果
一个小玩意,代码来源于网络. 效果图如下 代码如下 <html> <head> <style> * { margin: 0; padding: 0; } html, ...
- 2017 CCPC秦皇岛 M题 Safest Buildings
PUBG is a multiplayer online battle royale video game. In the game, up to one hundred players parach ...
- Openlayers3 WebGis二次开发包实例
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs& ...
- WebGis二次开发包实例
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs& ...
- 心理学实验程序编程(python)
任务一:实现简单的屏幕的颜色之间的切换 import pygame from pygame.locals import * pygame.init() win = pygame.display.set ...
- 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画?
本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...
- [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 ...
随机推荐
- Codeforces Codeforces Round #316 (Div. 2) C. Replacement set
C. Replacement Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/570/proble ...
- 从数据库得到的结果集存放到List集合中
一.业务阐述 在开发中查询的数据库结果集,既要连接数据库.执行数据库操作.关闭数据库,还要把结果集的记录人为的设置到自己封装的DAO中等一系列的重复代码. 本文主要是想解决:用户只需要得到数据库连接, ...
- Hark的数据结构与算法练习之煎饼排序
算法说明 假设煎锅里边有N个煎饼摞在了一起,它们大小不一并且顺序不一致,我们需要通过拿铲子将它们不停的翻个,进行排序,最终得到一个底下是大的煎饼,上边是小的煎饼的序列.这个排序的过程就是煎饼排序. 这 ...
- this和$(this)区别
This代表当前元素,是javascript关键词中的一个,表示上下文中的当前DOM元素,不能调用Jquery方法: $(this)返回一个Jquery对象,可调用多个方法.
- http://jingyan.baidu.com/article/d169e186aa8728436611d8f3.html
http://jingyan.baidu.com/article/d169e186aa8728436611d8f3.html
- 简单几何(半平面交+二分) LA 3890 Most Distant Point from the Sea
题目传送门 题意:凸多边形的小岛在海里,问岛上的点到海最远的距离. 分析:训练指南P279,二分答案,然后整个多边形往内部收缩,如果半平面交非空,那么这些点构成半平面,存在满足的点. /******* ...
- ZOJ2332 Gems(最大流)
题目大概说,alsomagic有宝石,宝石有颜色和形状两个属性:他有一种法力可以将某些颜色形状的宝石转化成另一种颜色形状的宝石:他的女朋友对各个颜色都有一定的容忍数量,而他自己也对各个形状都有一定的容 ...
- TYVJ P1046 Blast Label:dp
描述 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为“abcbcd”,则字符串“abcb□cd”,“□a□bcbcd□”和“abcb□cd□”都是X的扩 ...
- 【BZOJ】2875: [Noi2012]随机数生成器(矩阵乘法+快速乘)
http://www.lydsy.com/JudgeOnline/problem.php?id=2875 矩阵的话很容易看出来.....我就不写了.太水了. 然后乘法longlong会溢出...那么我 ...
- POJ 3286 How many 0's?(数位DP)
题目链接 终于过了,边界让我wa了好几次,猥琐的用AC代码对拍,很无奈,用非常麻烦的方法.写一下,估计以后再碰到,肯定看不懂这是写的什么了. 以前做过,统计1和2的,统计0比1和2麻烦多了,有前导0的 ...