d3.js 绘制极坐标图(polar plot)
0.引言
在极坐标系中,任意位置可由一个夹角和一段相对原点(极点)的距离表示。也就是说,我们可以用 (angle,r) 来表示极坐标系中的点。
1.数据
假设我们有如下数据集[ [10, 0.2], [6, 0.5], [23, 0.9],... ]。其中每个数据的一维表示时间(24小时制),二维表示信号强度。如[10, 0.2]表示十点的信号强度为0.2。现在,我们要将这些数据呈现在极坐标图(polar plot)上:
2.比例尺
我们发现,源数据的一维并不直接表示角度,二维也并不直接表示距离。那么我们需要用到比例尺。比例尺就是将某一区域的值映射到另一区域,其大小关系不变。
由于我们的区间都是连续的(连续的24小时映射到连续的360°,信号强度值映射到半径值),故这里我们用到的是线性比例尺。
1 var angle = d3.scale.linear() 2 .domain([0, 24]) 3 .range([0, 2 * Math.PI]); 4 5 var r = d3.scale.linear() 6 .domain([0, max_singnal]) 7 .range([0, radius]);
3.坐标系
为了清晰地呈现数据,绘制角度坐标轴(每45°画一条线)和半径坐标轴(半径每递增0.1画一个圆)。以及标上刻度。
// 角度坐标轴 1 var ga = svg.append("g") 2 .attr("class", "a axis") 3 .selectAll("g") 4 .data(d3.range(-90, 270, 45)) 5 .enter().append("g") 6 .attr("transform", function(d) { 7 return "rotate(" + d + ")"; 8 }); 9 10 ga.append("line") 11 .attr("x2", radius); 12 13 ga.append("text") 14 .attr("x", radius + 6) 15 .attr("dy", ".35em") 16 .style("text-anchor", function(d) { return d < 270 && d > 90 ? "end" : null; }) 17 .attr("transform", function(d) { 18 return d < 270 && d > 90 ? "rotate(180 " + (radius + 6) + ",0)" : null; 19 }) 20 .text(function(d,i) { return i*3 + ":00" });
// 半径坐标轴 1 var gr = svg.append("g") 2 .attr("class", "r axis") 3 .selectAll("g") 4 .data(r.ticks(max_singnal*10).slice(1)) 5 .enter().append("g"); 6 7 gr.append("circle") 8 .attr("r", r); 9 10 gr.append("text") 11 .attr("y", function(d) { return -r(d) - 4; }) 12 .attr("transform", "rotate(20)") 13 .style("text-anchor", "middle") 14 .text(function(d) { return d; });
4.绘制数据点
1 var color = d3.scale.category20(); 2 3 var line = d3.svg.line.radial() 4 .angle(function(d) { 5 return angle(d[0]); 6 }) 7 .radius(function(d) { 8 return r(d[1]); 9 }); 10 11 12 svg.selectAll("point") 13 .data(data) 14 .enter() 15 .append("circle") 16 .attr("class", "point") 17 .attr("transform", function(d) { 18 var coors = line([d]).slice(1).slice(0, -1); 19 return "translate(" + coors + ")" 20 }) 21 .attr("r", 8) 22 .attr("fill",function(d,i){ 23 return color(i); 24 });
5.完整代码
<!DOCTYPE html> <meta charset="utf-8"> <style>.frame {fill: none;stroke: #000;}.axis text {font: 10px sans-serif;}.axis line,.axis circle {fill: none;stroke: steelblue;stroke-dasharray: 4;}.axis:last-of-type circle {stroke: steelblue;stroke-dasharray: none;}.line {fill: none;stroke: orange;stroke-width: 3px;} </style><body><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script><script>var width = 960,height = 500,radius = Math.min(width, height) / 2 - 30;var data = [[0, 0.4],[6, 0.2],[Math.random()*24, Math.random()],[Math.random()*24, Math.random()],[Math.random()*24, Math.random()],[Math.random()*24, Math.random()],[Math.random()*24, Math.random()],[Math.random()*24, Math.random()],[Math.random()*24, Math.random()],[Math.random()*24, Math.random()],[Math.random()*24, Math.random()],[Math.random()*24, Math.random()],]var y = _.map(data, _.last);var max = Math.max.apply(null, y);max = Math.ceil(max*10)/10;var angle = d3.scale.linear().domain([0, 24]).range([0, 2 * Math.PI]);var r = d3.scale.linear().domain([0, max]).range([0, radius]);var svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");var gr = svg.append("g").attr("class", "r axis").selectAll("g").data(r.ticks(max*10).slice(1)).enter().append("g");gr.append("circle").attr("r", r);gr.append("text").attr("y", function(d) { return -r(d) - 4; }).attr("transform", "rotate(20)").style("text-anchor", "middle").text(function(d) { return d; });var ga = svg.append("g").attr("class", "a axis").selectAll("g").data(d3.range(-90, 270, 45)).enter().append("g").attr("transform", function(d) {return "rotate(" + d + ")";});ga.append("line").attr("x2", radius);ga.append("text").attr("x", radius + 6).attr("dy", ".35em").style("text-anchor", function(d) { return d < 270 && d > 90 ? "end" : null; }).attr("transform", function(d) {return d < 270 && d > 90 ? "rotate(180 " + (radius + 6) + ",0)" : null;}).text(function(d,i) { return i*3 + ":00" });var color = d3.scale.category20();var line = d3.svg.line.radial().angle(function(d) {return angle(d[0]);}).radius(function(d) {return r(d[1]);});svg.selectAll("point").data(data).enter().append("circle").attr("class", "point").attr("transform", function(d) {var coors = line([d]).slice(1).slice(0, -1);return "translate(" + coors + ")"}).attr("r", 8).attr("fill",function(d,i){return color(i);});</script>
转载于:https://www.cnblogs.com/rinka/p/d3js_polar_plot.html
d3.js 绘制极坐标图(polar plot)相关推荐
- D3.js绘制 颜色:RGB、HSL和插值 (V3版本)
转载地址:D3.js绘制 颜色:RGB.HSL和插值 (V3版本) 如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation).D3提供了d3.intrerpolateRgb()来处 ...
- d3js mysql_使用D3.js绘制地图并打点
本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件 去网上下载要绘制地图的geoJson文件. 使用d3.json( ...
- D3.js绘制树形图
1.什么是D3: data-driven-document,翻译为数据驱动的文档,是一种由数据来决定绘图流程的程序设计模型.简单说,D3是一个JavaScript的函数库,用来做数据可视化(将数据的各 ...
- 使用D3.js绘制重庆地图
重庆市地图json数据下载链接https://pan.baidu.com/s/19eZfuGGRY6JOrH9WnZJ5iw 密码h5f9 D3.js下载链接:https://pan.baidu.co ...
- D3.js 绘制柱状图
使用D3 V4版本绘制 使用D3绘制柱状图,绘制效果如下: 使用D3绘制柱状图,先对需要绘制的图形拆解,主要分为以下几个部分: 1. 比例尺的定义 2. 坐标轴的绘制 3. 添加矩形 4. 修改坐标轴 ...
- D3.js 绘制散点图
一.实现效果 二.代码 1.创建svg var svg = d3.select('#mychart').append('svg').attr('width', width + margin.left ...
- D3.js绘制竖向组织架构图
d3新手上路,记个笔记(*^_^*) 先上效果图: 主要参考:https://bl.ocks.org/mbostock/3184089 https://github.com/justincy/d3-p ...
- 用D3.js绘制完整的流程图demo
一个完整的流程图demo,效果入下: HTML <!doctype html><meta charset="utf-8"> <title>Dag ...
- D3.js 绘制立体柱状图
绘制效果图如下: 绘制思路: 将立体柱状图拆分为顶部与侧面,并分别用 path 路径绘制. 拆分后的顶部和侧边的绘制顺序如图所示: // 基础配置const svgObj = { // svg画布大小 ...
最新文章
- Lua基础之字符串(string)
- Memcached学习笔记 — 第四部分:Memcached Java 客户端-gwhalin(1)-介绍及使用
- 送外卖也要“黑科技”?阿里移动感知技术应用揭秘
- 最优化理论与方法(part3)--矩阵的Rayleigh商
- 如何将前端数据保存到文件
- Myeclipes连接Mysql数据库配置
- Matlab 生成vhdl,matlab - 使用HDL Workflow Advisor将Matlab代码转换为vhdl - 堆栈内存溢出...
- C++实践笔记(四)----AVL树的简单实现
- cocos2d-x之物理引擎初试
- DotNetNuke 04.05.05 安装
- 手把手带你玩转Spark机器学习-使用Spark进行文本处理
- Excel 公式CORREL算出相关系数
- java为什么用咖啡?
- nginx下的一级域名跳转到二级域名的配置
- 用数组统计字符串中26个大写字母的个数
- msde2000修改服务器名,MSDE2000数据库怎么修改SA口令?
- 激活windows系列地址
- Guitar Pro8.0吉他打谱作曲中文版有哪些新功能?
- 高维空间最近邻逼近搜索算法评测
- 通过RabbitMQ 进行消息通知
热门文章
- AP模块NOTE修改API
- 正则表达式搜魂者(转:清清月儿 )
- Flutter ClipOval 圆形裁剪实现的图形图片
- vue学习报错---Newline required at end of file but not found(Vue格式化代码问题)
- Codewars-(RegEx去除html标签)
- china-pub近7日计算机图书排行榜
- CF1166E The LCMs Must be Large
- import threading线程进程
- Win8Metro(C#)数字图像处理--2.31灰度拉伸算法
- jquery查找元素方法示例