1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script src="../bower_components/underscore/underscore-min.js"></script>
  7. <script src="../ventor/d3.min.js"></script>
  8. <style type="text/css">
  9.  
  10. body {
  11. padding-top: 50px;
  12. padding-left: 100px;
  13.  
  14. }
  15.  
  16. #chartArea {
  17. width: 400px;
  18. height: 300px;
  19. background-color: #CCC;
  20. }
  21.  
  22. .bar {
  23. display: inline-block;
  24. width: 20px;
  25. height: 75px; /* Gets overriden by D3-assigned height below */
  26. margin-right: 2px;
  27. /* fill: teal; *//* SVG doesn't have background prop, use fill instead*/
  28. z-index: 99;
  29. }
  30.  
  31. .bubble {
  32. display: inline-block;
  33. fill: purple;
  34. fill-opacity: 0.5;
  35. stroke: black;
  36. stroke-weight: 1px;
  37. }
  38.  
  39. .axis path, .axis line {
  40. fill: none;
  41. stroke: #000;
  42. stroke-width: 1px;
  43. shape-rendering: crispEdges;
  44. }
  45.  
  46. </style>
  47. </head>
  48. <body>
  49. <section id="chartArea"></section>
  50. <script>
  51. var dataset = _.map(_.range(30), function(num) {
  52. return {
  53. x: Math.round(Math.random() * 100),
  54. y: Math.round(Math.random() * 100),
  55. r: Math.round(5 + Math.random() * 10)
  56. };
  57. }), //reandom generate 15 data from 1 to 50
  58. margin = {top: 20, right: 20, bottom: 40, left: 40},
  59. w = 400 - margin.left - margin.right,
  60. h = 300 - margin.top - margin.bottom;
  61.  
  62. var svg = d3.select('#chartArea').append('svg')
  63. .attr('width', w + margin.left + margin.right)
  64. .attr('height', h + margin.top + margin.bottom)
  65. .append('g') //The last step is to add a G element which is a graphics container in SBG.
  66. .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); //Then offset that graphic element by our left and top margins.
  67.  
  68. var yScale = d3.scale.linear()
  69. .domain([0, d3.max(dataset, function(d) {
  70. return d.y; //tell the max function just need to care about y prop
  71. })])
  72. .range([h, 0]);
  73.  
  74. var yAxis = d3.svg.axis()
  75. .scale(yScale)
  76. .orient('left')
  77. .ticks(10)
  78. .innerTickSize(10)
  79. .outerTickSize(10)
  80. .tickPadding(10);
  81. svg.append('g')
  82. .attr('class', 'y axis')
  83. .attr('transform', 'translate(0,0)')
  84. .call(yAxis);
  85.  
  86. var xScale = d3.scale.linear()
  87. .domain([0, 100])
  88. .range([0, w]);
  89.  
  90. var xAxis = d3.svg.axis()
  91. .scale(xScale)
  92. .orient('bottom')
  93. .ticks(10)
  94. .innerTickSize(6)
  95. .outerTickSize(12)
  96. .tickPadding(12);
  97.  
  98. svg.append('g')
  99. .attr('class', 'x axis')
  100. .attr('transform', 'translate(0, ' + h + ')')
  101. .call(xAxis);
  102.  
  103. svg.selectAll('circle')
  104. .data(dataset)
  105. .enter()
  106. .append('circle')// svg doesn't have div, use rect instead
  107. .attr('class', "bubble")
  108. .attr('cx', function(each_data, index) {
  109. return xScale(each_data.x);
  110. })
  111. .attr('cy', function(each_data) {
  112. return yScale(each_data.y);
  113. })
  114. .attr('r', function(each_data, i) {
  115. return each_data.r;
  116. });
  117. </script>
  118.  
  119. <!--
  120. 1. svg should use 'fill' prop instead 'background-color'
  121. 2. svg width & height no need 'px'
  122. 3. attr(function(data_val, index){})
  123. 4. create svg, d3.select('selector').append('svg').attr('width', xxx).attr('height', xx)
  124. 5. svg should use 'rect' instead of 'div'
  125. -->
  126. </body>
  127. </html>

[D3] 10. Creating Axes with D3的更多相关文章

  1. [D3] Create Chart Axes with D3 v4

    Most charts aren’t complete without axes to provide context and labeling for the graphical elements ...

  2. [D3] 12. Basic Transitions with D3

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. [D3] Create DOM Elements with D3 v4

    Change is good, but creating from scratch is even better. This lesson shows you how to create DOM el ...

  4. d3可视化实战00:d3的使用心得和学习资料汇总

    最近以来,我使用d3进行我的可视化工具的开发已经3个月了,同时也兼用其他一些图表类库,自我感觉稍微有点心得.之前我也写过相关文章,我涉及的数据可视化的实现技术和工具,但是那篇文章对于项目开发而言太浅了 ...

  5. [D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive

    Integrating D3 with Angular can be very simple. In this lesson, you will learn basic integration as ...

  6. [D3] Modify DOM Elements with D3 v4

    Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing col ...

  7. [D3] Select DOM Elements with D3 v4

    Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This ...

  8. [D3] Creating a D3 Force Layout in React

    Learn how to leverage d3's layout module to create a Force Layout inside of React. We'll take a look ...

  9. D3、EChart、HighChart绘图demol

    1.echarts:   <!DOCTYPE html>   <html>   <head>   <meta charset="utf-8" ...

随机推荐

  1. C++中二维数组的动态创建与处理

    C++中用new动态创建二维数组的格式一般是这样: TYPE (*p)[N] = new TYPE [][N]; 其中,TYPE是某种类型,N是二维数组的列数.采用这种格式,列数必须指出,而行数无需指 ...

  2. 【Tools】Chrome开发者工具详解

    作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多不胜数,主流的有Chrome,Firefox,Safari,IE,Opera,非主流的如360,遨游,QQ浏览器,搜狗浏览器,据说淘宝 ...

  3. Unity3d 协程的注意问题(新手须注意,老手须加勉)

    关于unity3d的协程,非常的好用,比如等待几秒执行,等待下一帧执行等! 但是也有潜在的问题: 1.协程是单线程的,在主线程中完成 2.如果发现yield, 那么这一帧会结束,那么等下一帧调用此脚本 ...

  4. 关于 OneAPM Cloud Test DNS 监控的几个重要问题

    你注意到了吗?OneAPM Cloud Test 已经全面开启支持 DNS 监控了! CT 产品自上线以来一直致力于产品完善,希望能够尽可能全面地满足用户需求,为您提供完美的用户体验.目前 Cloud ...

  5. PHP 判断是表单否有这个参数,如果没有则设置默认值

    <?php @$name = $_GET["name"]; if(isset($name)) { echo "name = " .$name; } els ...

  6. 基于Spring Boot构建的Spring MVC快速入门

    原文地址:http://tianmaying.com/tutorial/spring-mvc-quickstart 环境准备 一个称手的文本编辑器(例如Vim.Emacs.Sublime Text)或 ...

  7. 【Xamarin挖墙脚系列:移动设备应用的开发周期及准则】

    原文:[Xamarin挖墙脚系列:移动设备应用的开发周期及准则] 原文地址:https://developer.xamarin.com/guides/cross-platform/getting_st ...

  8. Android开源项目发现---Menu 篇(持续更新)

    1. MenuDrawer 滑出式菜单,通过拖动屏幕边缘滑出菜单,支持屏幕上下左右划出,支持当前View处于上下层,支持Windows边缘.ListView边缘.ViewPager变化划出菜单等. 项 ...

  9. Tabhost嵌套以及Tab中多个Activity跳转的实现

    做了一个demo,先看看效果图: 源码 如下: () DoubleTabHost package yy.android.tab; import android.app.TabActivity; imp ...

  10. FFT小结

    先上模板 #include<cstdio> #include<cmath> <<)*+; typedef long long ll; ll power(ll t,; ...