[D3] 10. Creating Axes with D3
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title></title>
- <script src="../bower_components/underscore/underscore-min.js"></script>
- <script src="../ventor/d3.min.js"></script>
- <style type="text/css">
- body {
- padding-top: 50px;
- padding-left: 100px;
- }
- #chartArea {
- width: 400px;
- height: 300px;
- background-color: #CCC;
- }
- .bar {
- display: inline-block;
- width: 20px;
- height: 75px; /* Gets overriden by D3-assigned height below */
- margin-right: 2px;
- /* fill: teal; *//* SVG doesn't have background prop, use fill instead*/
- z-index: 99;
- }
- .bubble {
- display: inline-block;
- fill: purple;
- fill-opacity: 0.5;
- stroke: black;
- stroke-weight: 1px;
- }
- .axis path, .axis line {
- fill: none;
- stroke: #000;
- stroke-width: 1px;
- shape-rendering: crispEdges;
- }
- </style>
- </head>
- <body>
- <section id="chartArea"></section>
- <script>
- var dataset = _.map(_.range(30), function(num) {
- return {
- x: Math.round(Math.random() * 100),
- y: Math.round(Math.random() * 100),
- r: Math.round(5 + Math.random() * 10)
- };
- }), //reandom generate 15 data from 1 to 50
- margin = {top: 20, right: 20, bottom: 40, left: 40},
- w = 400 - margin.left - margin.right,
- h = 300 - margin.top - margin.bottom;
- var svg = d3.select('#chartArea').append('svg')
- .attr('width', w + margin.left + margin.right)
- .attr('height', h + margin.top + margin.bottom)
- .append('g') //The last step is to add a G element which is a graphics container in SBG.
- .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); //Then offset that graphic element by our left and top margins.
- var yScale = d3.scale.linear()
- .domain([0, d3.max(dataset, function(d) {
- return d.y; //tell the max function just need to care about y prop
- })])
- .range([h, 0]);
- var yAxis = d3.svg.axis()
- .scale(yScale)
- .orient('left')
- .ticks(10)
- .innerTickSize(10)
- .outerTickSize(10)
- .tickPadding(10);
- svg.append('g')
- .attr('class', 'y axis')
- .attr('transform', 'translate(0,0)')
- .call(yAxis);
- var xScale = d3.scale.linear()
- .domain([0, 100])
- .range([0, w]);
- var xAxis = d3.svg.axis()
- .scale(xScale)
- .orient('bottom')
- .ticks(10)
- .innerTickSize(6)
- .outerTickSize(12)
- .tickPadding(12);
- svg.append('g')
- .attr('class', 'x axis')
- .attr('transform', 'translate(0, ' + h + ')')
- .call(xAxis);
- svg.selectAll('circle')
- .data(dataset)
- .enter()
- .append('circle')// svg doesn't have div, use rect instead
- .attr('class', "bubble")
- .attr('cx', function(each_data, index) {
- return xScale(each_data.x);
- })
- .attr('cy', function(each_data) {
- return yScale(each_data.y);
- })
- .attr('r', function(each_data, i) {
- return each_data.r;
- });
- </script>
- <!--
- 1. svg should use 'fill' prop instead 'background-color'
- 2. svg width & height no need 'px'
- 3. attr(function(data_val, index){})
- 4. create svg, d3.select('selector').append('svg').attr('width', xxx).attr('height', xx)
- 5. svg should use 'rect' instead of 'div'
- -->
- </body>
- </html>
[D3] 10. Creating Axes with D3的更多相关文章
- [D3] Create Chart Axes with D3 v4
Most charts aren’t complete without axes to provide context and labeling for the graphical elements ...
- [D3] 12. Basic Transitions with D3
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- [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 ...
- d3可视化实战00:d3的使用心得和学习资料汇总
最近以来,我使用d3进行我的可视化工具的开发已经3个月了,同时也兼用其他一些图表类库,自我感觉稍微有点心得.之前我也写过相关文章,我涉及的数据可视化的实现技术和工具,但是那篇文章对于项目开发而言太浅了 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- D3、EChart、HighChart绘图demol
1.echarts: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
随机推荐
- C++中二维数组的动态创建与处理
C++中用new动态创建二维数组的格式一般是这样: TYPE (*p)[N] = new TYPE [][N]; 其中,TYPE是某种类型,N是二维数组的列数.采用这种格式,列数必须指出,而行数无需指 ...
- 【Tools】Chrome开发者工具详解
作为一名前端开发者,打交道最多的可能是和浏览器.市面上各种浏览器多不胜数,主流的有Chrome,Firefox,Safari,IE,Opera,非主流的如360,遨游,QQ浏览器,搜狗浏览器,据说淘宝 ...
- Unity3d 协程的注意问题(新手须注意,老手须加勉)
关于unity3d的协程,非常的好用,比如等待几秒执行,等待下一帧执行等! 但是也有潜在的问题: 1.协程是单线程的,在主线程中完成 2.如果发现yield, 那么这一帧会结束,那么等下一帧调用此脚本 ...
- 关于 OneAPM Cloud Test DNS 监控的几个重要问题
你注意到了吗?OneAPM Cloud Test 已经全面开启支持 DNS 监控了! CT 产品自上线以来一直致力于产品完善,希望能够尽可能全面地满足用户需求,为您提供完美的用户体验.目前 Cloud ...
- PHP 判断是表单否有这个参数,如果没有则设置默认值
<?php @$name = $_GET["name"]; if(isset($name)) { echo "name = " .$name; } els ...
- 基于Spring Boot构建的Spring MVC快速入门
原文地址:http://tianmaying.com/tutorial/spring-mvc-quickstart 环境准备 一个称手的文本编辑器(例如Vim.Emacs.Sublime Text)或 ...
- 【Xamarin挖墙脚系列:移动设备应用的开发周期及准则】
原文:[Xamarin挖墙脚系列:移动设备应用的开发周期及准则] 原文地址:https://developer.xamarin.com/guides/cross-platform/getting_st ...
- Android开源项目发现---Menu 篇(持续更新)
1. MenuDrawer 滑出式菜单,通过拖动屏幕边缘滑出菜单,支持屏幕上下左右划出,支持当前View处于上下层,支持Windows边缘.ListView边缘.ViewPager变化划出菜单等. 项 ...
- Tabhost嵌套以及Tab中多个Activity跳转的实现
做了一个demo,先看看效果图: 源码 如下: () DoubleTabHost package yy.android.tab; import android.app.TabActivity; imp ...
- FFT小结
先上模板 #include<cstdio> #include<cmath> <<)*+; typedef long long ll; ll power(ll t,; ...