<!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. Loadrunner中web_custom_request使用场景

    其中有一段从服务器段动态返回的字符串需要重新提交给服务器(见红色标注) 录制自动生成的脚本是: web_submit_data("generateYfLstAction.do",  ...

  2. Android 编程下如何修改 jar 文件的包名

    首先我们要说说为什么要修改 jar 文件的包名,jar 包我们会非常高频率的使用,尤其是用一些其他三方库的时候,往往把 java 代码打包成 jar 文件,方便项目依赖使用.笔者在开发过程中遇到过一些 ...

  3. HDU2222 Keywords Search（AC自动机模板）

    AC自动机是一种多模式匹配的算法.大概过程如下: 首先所有模式串构造一棵Trie树,Trie树上的每个非根结点都代表一个从根出发到该点路径的字符串. 然后每个结点都计算出其fail指针的值,这个fai ...

  4. RETINA显示屏下ICON优化方法

    便于理解,先来了解几个名词: dpi(dots per inch),每英寸的点数,用来测量任何设备的硬件分辨率.一个21”的屏幕可以拥有1680 X 1050 的分辨率,27”的屏幕也可以拥有相同的分 ...

  5. TYVJ P1046 Blast Label：dp

    描述 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为“abcbcd”,则字符串“abcb□cd”,“□a□bcbcd□”和“abcb□cd□”都是X的扩 ...

  6. Solve problem 'SURF' is not a member of 'cv'

    SIFT and SURF were moved to nonfree module. You need to add #include <opencv2/nonfree/nonfree.hpp ...

  7. PreparedStatement与Statement的区别

    PreparedStatement与statement的区别 1.PreparedStatement是预编译的,对于批量处理可以大大提高效率. 也叫JDBC存储过程 2.使用 Statement 对象 ...

  8. sql中写标量函数生成大写拼音首字母

    USE [StockManageSystemV2] GO /****** Object: UserDefinedFunction [dbo].[PinYin] Script Date: 2016-08 ...

  9. Css3 - 全面学习

    css3实验.生成.学习网站 http://www.css3maker.com/ http://www.css3.me/ 查询前缀和兼容性 http://caniuse.com/ 1.文本阴影 < ...

  10. 文件上传\">将在3秒钟后返回前页

    conn.php: <?php $id=mysql_connect('localhost','root','root'); mysql_select_db("db_database12 ...