<!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. Android下拉上滑显示与隐藏Toolbar另一种实现

    public abstract class RecyclerViewScrollListener extends RecyclerView.OnScrollListener { private sta ...

  2. Google地图接口API之地图事件(四)

    演示几个地图事件: 1. 点击标记缩放地图 仍然使用上一遍文章使用的英国伦敦的地图.点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件). 代码如下: <html> <h ...

  3. 使用INFORMATION_SCHEMA.Columns查询数据表结构

    使用情形1:写数据字典(Word文档)时, 需要获取表结构,以加快书写速度,当然,前提是没有文档导出工具. 使用情形2:生成实体时, 前提也是没有代码生成工具. 脚本 SELECT A.COLUMN_ ...

  4. ! cocos2d sprintf的问题

    char dong[100]; sprintf(dong,"%s","dongshen"); CCLOG(dong); 以上正确 char dong[100]; ...

  5. shell条件与循环

    一．if语句 if [expression] then elif[expression] then else fi 注 : expression前后要有空格:判断相等用 = 而不是 == : then ...

  6. Java虚拟机（JVM）中的内存设置详解

    在一些规模稍大的应用中,Java虚拟机(JVM)的内存设置尤为重要,想在项目中取得好的效率,GC(垃圾回收)的设置是第一步. PermGen space:全称是Permanent Generation ...

  7. FlyCapture2 Qt5 MinGW Configuration

    Install FlyCatprue2 to the folder "C:\PointGreyResearch\" Add the following to the .pro fi ...

  8. #undef

    #undef 是在后面取消以前定义的宏定义 该指令的形式为 #undef 标识符 其中,标识符是一个宏名称.如果标识符当前没有被定义成一个宏名称,那么就会忽略该指令. 一旦定义预处理器标识符,它将保持 ...

  9. swift文件上传及表单提交

    var carData:NSMutableDictionary = NSMutableDictionary(); var request:NSMutableURLRequest = NSMutable ...

  10. String数组转List，List转String数组

    引入自: http://blog.csdn.net/aaronuu/article/details/7055650 List 转换为 String数组 List<String> list  ...