circle and bar

<!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>
时间: 2024-10-29 17:15:10

circle and bar的相关文章

AltiumDesigner学习笔记(一)&mdash;&mdash;创建工程与原理图文件

一.创建工程与原理图文件 1.通过菜单创建PCB工程 (1)File - New - Project - PCB Project,即可在当前工作区创建新的PCB工程 (2)新建工程并不直接在硬盘中创建文件,需要保存:在工程面板中,右键单击新建的工程名 - Save Project,在弹出的对话框中,选择工程存储目录(一般需要为新建的工程新建一个专属目录)并命名工程. 2.通过菜单或者工程面板向工程中添加原理文件 (1)在工程面板中,右键单击新建的工程 - Add New to Project -

很好的iOS学习资料

https://github.com/vsouza/awesome-ios 汇集了很多好的资料 https://github.com/vsouza/awesome-ios Skip to content This repository Pull requests Issues Gist You don’t have any verified emails. We recommend verifying at least one email. Email verification helps ou

见过吗?14个超有创意的加载进度条设计

所有进度条的功能在于注重细节,即使是最微小的细节可以改变整个用户体验.好的设计能够广泛传播,让人们分享并推荐你的设计.在下面的列表中,你会发现一批设计精美的加载进度条例子,可以免费下载. 您可能感兴趣的相关文章 22套 Web & Mobile PSD 用户界面素材 45套精美的手机界面设计素材和设计工具 分享30套精美的Web和手机开发UI素材 60个精美的免费移动开发PSD素材资源 45套新鲜出炉的精美 PSD 网页设计素材 Loading Bar by Andra Popovici Amo

Windows 7样式地址栏(Address Bar)控件实现

介绍 从Vista开始,地址栏就有了很大的改变,不知道大家有什么感觉,笔者觉得很方便,同时又兼容之前的功能,是个很不错的创新.不过,微软并不打算把这一很酷的功能提供给广大的开发人员. 本文提供了一个简单的Address Bar实现,使用.NET 2.0和VS2008. 它是基于一个简单的树型遍历实现的,同时适用于各种级联数据. Demo中提供的是一个非常简单的示例,可以浏览文件系统.这里这是展示它是如何工作的. 使用代码 了解实现最简单的办法就是直接下载源代码,然后打开玩玩看- 在Design-

codeforces 598E E. Chocolate Bar(区间dp)

题目链接: E. Chocolate Bar time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standard output You have a rectangular chocolate bar consisting of n × m single squares. You want to eat exactly k squares, so you ma

安卓项目开发实战(1)--首页顶部菜单BAR实现

从今天开始,我将开始自己手写一个星座运势的项目,星座运势的数据来源采用MYAPI的星座数据,客户端完全自己实现. 这个系列主要是讲工程中主要界面的布局展示和一些项目中的难点解析.由于本人刚自学安卓不久,请各位大神拍砖时手下留情. 第一个讲讲首页顶部的BAR的实现 现在的APP据我观察顶部都会涉及一个BAR,主要作用就是提示和导航, 先来看下实际的效果 那么如何实现这样一个效果呢? 具体做法是在页面布局里嵌套一个顶部导航菜单的布局 <?xml version="1.0" encod

657. Judge Route Circle 判断线路成圆

Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this robot makes a circle, which means it moves back to the original place. The move sequence is represented by a string. And each move is represent by a characte

SVG圆形&lt;circle&gt; 标签

1 <?xml version="1.0" standalone="no"?> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 4 5 <svg width="100%" height="100%" v

hzau 1208 Color Circle(dfs)

1208: Color Circle Time Limit: 1 Sec  Memory Limit: 1280 MBSubmit: 289  Solved: 85[Submit][Status][Web Board] Description There are colorful flowers in the parterre in front of the door of college and form many beautiful patterns. Now, you want to fi