<!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. Hark的数据结构与算法练习之珠排序

    ---恢复内容开始--- 算法说明 珠排序是分布排序的一种. 说实在的,这个排序看起来特别的巧妙,同时也特别好理解,不过不太容易写成代码,哈哈. 这里其实分析的特别好了,我就不画蛇添足啦.  大家看一 ...

  2. VS 2010 WebSite网站 使用CodeBehide 方式开发[Web应用程序项目转Web网站]

    由于生成Web应用程序的文件非常大,100M左右,上传到香港太慢,对于运维工作很不现实, 所以只能改用单个源代码文件上传方式,也就是Web网站方式,但VS2010中只提供Web网站转Web应用程序功能 ...

  3. 手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画）

    效果图: 还在羡慕metro的ProgressRing吗? wpf 也可以拥有 首先说下思路, 一共6个点围绕一直圆转,所以需要使用rotation动画 并且一直转下去. 那么下面的问题就好解决了. ...

  4. JAVA计算文件大小

    File f = new File(save_path+File.separator + resouce_id+".zip"); FileInputStream fis = new ...

  5. 【wikioi】1403 新三国争霸（dp+kruskal）

    http://wikioi.com/problem/1403/ 一开始的确感觉和bzoj1003很像,不同的是这里还要求联通,求最小的边. 我们可以想到用最小生成树(为嘛我自己想不到呢..) 我们可以 ...

  6. SpringMVC_The resource identified by this request is only capable of generating responses with characteristics

    今天在调试springMVC的时候,在将一个对象返回为json串的时候,浏览器中出现异常: The resource identified by this request is only capabl ...

  7. 关于iOS手势

    引: 前几天遇到一个坑,又仔细分析了一下事件的原理,不得不承认苹果的文档还是写的挺好的,网上就搜不到有几篇博客是介绍这个的,都是一些关于基本的用法的.这里纪录一下. 1.关于事件响应链. a.硬件接收 ...

  8. 怎样使用Photoshop CS5的操控变形功能

    | 浏览:23114 | 更新:2011-08-08 10:10 | 标签: photoshop 1 2 3 4 5 6 7 分步阅读 Photoshop CS5已经发布很长时间了,和以前的版本相比, ...

  9. 《GK101任意波发生器》升级固件发布（版本：1.0.2build690）

    一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build690 编译日期:2015年4月24日 ====================================== 二. ...

  10. 【液晶模块系列基础视频】4.1.X-GUI图形界面库-画线画圆等函数简介

    [液晶模块系列基础视频]4.1.X-GUI图形界面库-画线画圆等函数简介 ============================== 技术论坛:http://www.eeschool.org 博客地 ...