<!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">

div.chart{

font-family:sans-serif;

font-size:0.7em;

}

div.bar {

background-color:#a3b466;

color:white;

height:2em;

line-height:2em;

padding-right:1em;

margin-left:22em;

margin-top:5px;

margin-bottom:2px;

text-align:right;

}

div.label {

background-color:#c364a7;

color:white;

height:2em;

line-height:2em;

padding-right:1em;

margin-bottom:2px;

float:left;

width:20em;

text-align:right;

}

</style>

</head>

<body>

<p> p </p>

<script > 

var  data=[{

"count": 2677.09756097561,

"id": 1,

"name": "Robert F. Kennedy Bridge Bronx Plaza"

},

{

"count": 260,

"id": 2,

"name": "Bridge    "

},

{

"count": 800,

"id": 3,

"name": " Bronx Plaza"

},

{

"count": 2000,

"id": 4,

"name": " Plaza"

},

];

d3.select("body")

.append("div")

.attr("class", "chart")

.selectAll("div.line")

.data(data)

.enter()

.append("div")

.attr("class","line");

d3.selectAll("div.line")

.append("div")

.attr("class","label")

.text(function(d){return d.name});

d3.selectAll("div.line")

.append("div")

.attr("class","bar")

.style("width", function(d){return d.count/10 + "px"})

.text(function(d){return Math.round(d.count)});

 // circle

 //圆心x坐标  cy圆心y坐标   r半径

var  datacircle=[

{

"cx": 10,

"cy": 20,

"r": 10,

"stroke":"orange",

"color":"#c364a7"

},

{

"cx": 10,

"cy": 50,

"r": 10,

"stroke":"orange",

"color":"#c364a7"

},

{

"cx": 10,

"cy": 80,

"r": 10,

"stroke":"orange",

"color":"purple"

},

];

var margin = 50,

width = 700,

height = 300;

d3.select("body")

.append("svg")

.attr("width", width)

.attr("height", height)

.selectAll("circle")

.data(datacircle)

.enter()

.append("circle");

d3.selectAll("circle")

.attr("cx", function(d,i) {    return d.cx+i*30;    })

.attr("cy", function(d,i) {    return d.cy+i*50;    })

.attr("r", function(d,i) {    return d.r+i*16;    })

.attr("stroke", function(d) {    return d.stroke;    })

.style("fill", function(d) { return d.color; });

</script>

</body>

</html>

circle and bar的更多相关文章

  1. how to create a ring progress bar in web skills

    how to create a ring progress bar in web skills ring progress bar & circle progress bar canvas j ...

  2. AltiumDesigner学习笔记（一）——创建工程与原理图文件

    一.创建工程与原理图文件 1.通过菜单创建PCB工程 (1)File - New - Project - PCB Project,即可在当前工作区创建新的PCB工程 (2)新建工程并不直接在硬盘中创建 ...

  3. Vue/React圆环进度条

    数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...

  4. vue 圆形进度条组件解析

    项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰 面向人群 急于使用vue圆形进度条动画组件的同学.直接下载文件,拷贝代码即可运行. 喜欢看源码,希望了解 ...

  5. Java基础之扩展GUI——添加状态栏（Sketcher 1 with a status bar）

    控制台程序. 为了显示各个应用程序参数的状态,并且将各个参数显示在各自的面板中,在应用程序窗口的底部添加状态栏是常见且非常方便的方式. 定义状态栏时没有Swing类可用,所以必须自己建立StatusB ...

  6. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  7. scala - multiple overloaded alternatives of method bar define default arguments

    同名同位置默认参数不能overload def bar(i:Int,s:String="a"){} def bar(i:String,s:String="b") ...

  8. 编程中Foo, Bar 到底什么意思？

    1 前言 在很多国外计算机书本和一些第三份开源软件的Demo中经常用到两个英文单词Foo,Bar.这到底是什么意思呢?从步入屌丝界的IT生活见到这两个单词到现在我还是不知道这两个单词的真正含义,今天有 ...

  9. iOS第八课——Navigation Controller和Tab bar Controller

    今天我们要学习Navigation Controller和Tab bar Controller. Navigation Controller是iOS编程中比较常用的一种容器,用来管理多个视图控制器. ...

随机推荐

  1. 利用Bundle在activity之间传递对象

    (2010-12-04 09:45:54) 转载▼ 标签: it 分类: android开发 转自:http://chen592969029.javaeye.com/blog/772656 假如需要在 ...

  2. Oracle表空间管理

    oracle表空间相关常用命令小结: 1.ALTER DATABASE SET DEFAULT BIGFILE TABLESPACE;              //修改表空间数据文件类型 2.ALT ...

  3. sprint1的个人总结及《构建之法》8、9、10章读后感

    对sprint1的总结: 我们这次的sprint1做的挺差的,大家原来说好的分工都没有完成,也许是大家这段时间的大作业花了更多的时间,所以对这次团队任务的进度是拖慢了很多,但是团队已经认清了现阶段的问 ...

  4. LightOJ1031 Easy Game（区间DP）

    我可能真想不到这题是区间DP,不过知道是区间DP想了下就AC了. dp[i][j]表示局面为ai...aj先手能获得与后手得分的最大差值 那么转移到当前状态就是枚举中间的位置,分成两边,其中一边先手全 ...

  5. 不通过App Store，在iOS设备上直接安装应用程序(转)

    今天在iOS设备上安装天翼云存储app,在safari上直接打开http://cloud.189.cn/wap/index.jsp,点击“点击免费安装”,如下图: 神奇的事情发生了,设备上直接下载ap ...

  6. 【BZOJ】2929: [Poi1999]洞穴攀行（最大流）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2929 题意描述不清..搞得我wa了一发.. 应该是,有1和n的点的边容量都为1,其余随便... 然后 ...

  7. .NET正则基础之——平衡组

    1        概述 平衡组是微软在.NET中提出的一个概念,主要是结合几种正则语法规则,提供对配对出现的嵌套结构的匹配..NET是目前对正则支持最完备.功能最强大的语言平台之一,而平衡组正是其强大 ...

  8. UITextFielddelegate委托方法注释

    - (BOOL)textFieldShouldBeginEditing:(UITextField *)textField{         //返回一个BOOL值,指定是否循序文本字段开始编辑     ...

  9. C Memory Layout C语言中的内存布局

    在C语言中,内存的主要分为下列几部分: 1. Text/Code Segment 文本/代码区 2. Initialized Data Segments 初始化的数据区 3. Uninitialize ...

  10. [HihoCoder] Highway 高速公路问题

    Description In the city, there is a one-way straight highway starts from the northern end, traverses ...