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 ...
随机推荐
- android wheelview 滚轮控件
项目地址:http://android-wheel.googlecode.com/svn
- RabbitMQ原理
vhosts(broker) connection 与 channel(连接与信道) exchange 与 routingkey(交换机与路由键) queue(队列) Binding(绑定) cli ...
- 简单几何(数学公式+凸包) UVA 11168 Airport
题目传送门 题意:找一条直线,使得其余的点都在直线的同一侧,而且使得到直线的平均距离最短. 分析:训练指南P274,先求凸包,如果每条边都算一边的话,是O (n ^ 2),然而根据公式知直线一般式为A ...
- 简单几何(点的位置) POJ 1584 A Round Peg in a Ground Hole
题目传送门 题意:判断给定的多边形是否为凸的,peg(pig?)是否在多边形内,且以其为圆心的圆不超出多边形(擦着边也不行). 分析:判断凸多边形就用凸包,看看点集的个数是否为n.在多边形内用叉积方向 ...
- 状态压缩 UVALive 6068 The Little Girl who Picks Mushrooms (12长春C)
题目传送门 题意:采蘑菇.现在采了n座山,共5座山,最后要求有三个篮子的蘑菇量是1024的整数倍,丢掉后一直减1024直到不超过1024 分析:n <= 3时直接1024,否则状压枚举哪三个篮子 ...
- 设置完在Canvas的位置后,控件HitTest不响应的问题
have a Canvas with a couple of elements on it like Line, Path and Text Box. In the MouseOver event o ...
- 【POJ】2449 Remmarguts' Date(k短路)
http://poj.org/problem?id=2449 不会.. 百度学习.. 恩. k短路不难理解的. 结合了a_star的思想.每动一次进行一次估价,然后找最小的(此时的最短路)然后累计到k ...
- Linux(Redhat)下redis安装
原文:http://www.javaweb1024.com/data/NoSQL/2015/06/29/785.html redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系 ...
- 在ASP.Net2.0中使用UrlRewritingNet实现链接重写
采用UrlRewritingNet.UrlRewriter.dll来轻松实现UrlRewritingNet.UrlRewriter.dll 可从其官方网站下载:http://www.urlrewrit ...
- Maya 学习资料
罗其胜3d角色强化 CGwhat-Maya变形金刚擎天柱建模教程 Pixar in the box - khan academy Siggraph历届优秀动画 CG软件发展史:MAYA动画十年历程 m ...