<!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. 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情（三）码农网

    12. 安装 Apache Tomcat Tomcat 是由 Apache 设计的用来运行 Java HTTP web 服务器的 servlet 容器.按照下面的方法安装 tomcat,但需要指出的是 ...

  2. jq验证插件validate

    博客: http://www.cnblogs.com/linjiqin/p/3433635.html http://blog.csdn.net/windxxf/article/details/7520 ...

  3. DEDE织梦常用的调用方法

    DEDE织梦常用的调用常规调用: 网站名称调用:<title>{dede:global.cfg_webname/}</title> 网站关键词调用:<meta name= ...

  4. 如何扫描出Android系统媒体库中视频文件

    Android系统启动时会去扫描系统文件,并将系统支持的视频文件(mp4,3gp,wmv)扫描到媒体库(MediaStore)中,下面代码演示如何获得这些文件的信息: publicstatic Lis ...

  5. Hark的数据结构与算法练习之耐心排序

    算法说明 耐心排序是插入排序的一种,至少wikipedia是这么分的. 话说我明白这个算法的实现思路了,但是不明白这么做的意义何在? 如果明白的朋友帮忙留个言说一下,以后如果我明白的话,我会来修改这个 ...

  6. python 类访问控制

    访问限制 我们可以给一个实例绑定很多属性,如果有些属性不希望被外部访问到怎么办? Python对属性权限的控制是通过属性名来实现的,如果一个属性由双下划线开头(__),该属性就无法被外部访问.看例子: ...

  7. javascript优化--08模式(代码复用)01

    优先使用对象组合,而不是类继承: 类式继承:通过构造函数Child()来获取来自于另一个构造函数Parent()的属性: 默认模式:子类的原型指向父类的一个实例 function inherit(C, ...

  8. HierarchyRequestError:Node cannot be inserted at the specified point in the hierarchy

    问题描述: 用jquery的ajax加载html片段,出现该错误 HierarchyRequestError:Node cannot be inserted at the specified poin ...

  9. ural 1268. Little Chu

    1268. Little Chu Time limit: 0.25 secondMemory limit: 64 MB The favorite occupation of Little Chu is ...

  10. 不容易系列之(4)——考新郎[HDU2049]

    不容易系列之(4)——考新郎 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...