<!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. 只用CSS美化选择框

    只用CSS美化选择框 2012-03-02 11:04 by iBlog, 26240 阅读, 14 评论, 收藏, 编辑 <本文译自Style a Select Box Using Only ...

  2. Linux部署项目简要记录【只是步骤没有配图】

    1.服务器(192.168.1.197)新建数据库jspxcms_1206,导入数据2.eclipse打war包3.上传war包到/home/app/apache-tomcat-7.0.68/weba ...

  3. POJ2817 WordStack（状压DP）

    题目给几个字符串,可以给它们添加前导空格,然后排列,计算每一个字符串和前一个字符串相同非空格字符相等的个数,求可能的最大个数. 状态DP: d[S][i][j]表示已经用的字符串集合S且排列的最后一个 ...

  4. 初始化lpc2106开发工程

    单片机型号:lpc2106.Init.s:初始化pc指针和sp指针.    AREA    Init, CODE, READONLY    IMPORT  test1_main    EXPORT  ...

  5. IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...

  6. 【wikioi】1250 Fibonacci数列（矩阵乘法）

    http://wikioi.com/problem/1250/ 我就不说这题有多水了. 0 1 1 1 矩阵快速幂 #include <cstdio> #include <cstri ...

  7. [二分图&最小割]

    OTL@assassain 反转源汇的模型: 给定一个二分图,同时选择集合中的两个点会有一个代价,选择每一个点有一个收益,问最大收益是多少 (即两个点在不同的集合中是有冲突关系的) 解法: 用最小割模 ...

  8. win7 无法复制粘贴

     win7 无法复制粘贴解决办法 在开始-运行里输入以下命令 regsvr32 shdocvw.dll ,确定,接着出现一个消息框,确定 regsvr32 oleaut32.dll,确定,接着出现一个 ...

  9. opengl画圆

    通过这个例子可以更加深刻的了解割圆术的原理,明白如何的化曲为直,且看代码: #include <windows.h> //#include <GLUT/glut.h> #inc ...

  10. PHP有两个不同的版本:4.x系列版本和5.x系列版本

    在为用户提供动态内容方面,PHP和MySQL是一个强大的组合.这些年来,这两项产品已经跨越了它们最初的应用舞台,现在,一些世界上最繁忙的网站也在应用它们.虽然它们当初都是开源软件,只能在UNIX/Li ...