1. <!doctype html>
  2. <meta charset="utf-8">
  3. <html>
  4. <head>
  5. <title>D3 tutorial</title>
  6. <!--
  7. <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  8. -->
  9. <script src="d3.min.js" charset="utf-8"></script> 
  10.  
  11. <style type="text/css">
  12. div.chart{
  13. font-family:sans-serif;
  14. font-size:0.7em;
  15. }
  16. div.bar {
  17. background-color:#a3b466;
  18. color:white;
  19. height:2em;
  20. line-height:2em;
  21. padding-right:1em;
  22. margin-left:22em;
  23. margin-top:5px;
  24. margin-bottom:2px;
  25. text-align:right;
  26. }
  27.  
  28. div.label {
  29. background-color:#c364a7;
  30. color:white;
  31. height:2em;
  32. line-height:2em;
  33. padding-right:1em;
  34. margin-bottom:2px;
  35. float:left;
  36. width:20em;
  37. text-align:right;
  38. }
  39.  
  40. </style>
  41. </head>
  42. <body>
  43.  
  44. <p> p </p>
  45.  
  46. <script > 
  47.  
  48. var  data=[{
  49. "count": 2677.09756097561,
  50. "id": 1,
  51. "name": "Robert F. Kennedy Bridge Bronx Plaza"
  52. },
  53. {
  54. "count": 260,
  55. "id": 2,
  56. "name": "Bridge    "
  57. },
  58. {
  59. "count": 800,
  60. "id": 3,
  61. "name": " Bronx Plaza"
  62. },
  63. {
  64. "count": 2000,
  65. "id": 4,
  66. "name": " Plaza"
  67. },
  68. ];
  69.  
  70. d3.select("body")
  71. .append("div")
  72. .attr("class", "chart")
  73. .selectAll("div.line")
  74. .data(data)
  75. .enter()
  76. .append("div")
  77. .attr("class","line");
  78.  
  79. d3.selectAll("div.line")
  80. .append("div")
  81. .attr("class","label")
  82. .text(function(d){return d.name});
  83.  
  84. d3.selectAll("div.line")
  85. .append("div")
  86. .attr("class","bar")
  87. .style("width", function(d){return d.count/10 + "px"})
  88. .text(function(d){return Math.round(d.count)});
  89.  
  90.  // circle
  91.  
  92.  //圆心x坐标  cy圆心y坐标   r半径
  93. var  datacircle=[
  94. {
  95. "cx": 10,
  96. "cy": 20,
  97. "r": 10,
  98. "stroke":"orange",
  99. "color":"#c364a7"
  100. },
  101.  
  102. {
  103. "cx": 10,
  104. "cy": 50,
  105. "r": 10,
  106. "stroke":"orange",
  107. "color":"#c364a7"
  108. },
  109.  
  110. {
  111. "cx": 10,
  112. "cy": 80,
  113. "r": 10,
  114. "stroke":"orange",
  115. "color":"purple"
  116. },
  117.  
  118. ];
  119.  
  120. var margin = 50,
  121. width = 700,
  122. height = 300;
  123.  
  124. d3.select("body")
  125. .append("svg")
  126. .attr("width", width)
  127. .attr("height", height)
  128. .selectAll("circle")
  129. .data(datacircle)
  130. .enter()
  131. .append("circle");
  132.  
  133. d3.selectAll("circle")
  134. .attr("cx", function(d,i) {    return d.cx+i*30;    })
  135. .attr("cy", function(d,i) {    return d.cy+i*50;    })
  136. .attr("r", function(d,i) {    return d.r+i*16;    })
  137. .attr("stroke", function(d) {    return d.stroke;    })
  138. .style("fill", function(d) { return d.color; });
  139.  
  140. </script>
  141.  
  142. </body>
  143. </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. 打开别人Xamarin项目找不到android.jar文件

    打开别人Xamarin项目找不到android.jar文件 错误信息:Could not find android.jar for API Level 23.打开非本机创建的Xamarin项目,编译的 ...

  2. DataTable转换成List<T>

    很多时候需要将DataTable转换成一组model,直接对model执行操作会更加方便直观. 代码如下: public static class DataTableToModel { public ...

  3. BZOJ4346 : [POI2016]Nadajniki

    设$f[x][j]$表示$x$点不放无线,它的儿子里放了$j$个无线,且对$x$的父亲不作要求时的最小代价. $g[x][j]$表示$x$点不放无线,要求$x$的父亲至少放$j$个无线时的最小代价. ...

  4. 发送JS错误日志到服务器

    JS记录错误日志/捕捉错误 //onerror提供异常信息,文件路径和发生错误代码的行数的三个参数. window.onerror = function(e,url,index){ var msg = ...

  5. 在线代码格式化，在线JSON校验格式化

    在线代码格式化 http://tool.oschina.net/codeformat/json 在线JSON校验格式化 http://www.kjson.com/ 两个好用工具

  6. JavaScript_解决safari浏览器window.open无法实现的问题

    解决 safari window.open 无法实现的问题 先说下问题是什么吧: safari 中没办法在回调函数里面执行window.open, 原因是safari的安全机制将其阻挡了(具体的原因可 ...

  7. .NET正则基础之——平衡组

    1        概述 平衡组是微软在.NET中提出的一个概念,主要是结合几种正则语法规则,提供对配对出现的嵌套结构的匹配..NET是目前对正则支持最完备.功能最强大的语言平台之一,而平衡组正是其强大 ...

  8. android怎样调用@hide和internal API

    android怎样调用@hide和internal API 2012-12-11 16:21 8772人阅读 评论(3) 收藏 举报  分类: Android开发(277)  Android有两种类型 ...

  9. 什么是SQL注入式攻击

    什么是SQL注入式攻击? 所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或者影响 ...

  10. Phaser提供了Button对象简单的实现一个按钮

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...