0.引言

在极坐标系中,任意位置可由一个夹角和一段相对原点(极点)的距离表示。也就是说,我们可以用 (angle,r) 来表示极坐标系中的点。

1.数据

假设我们有如下数据集[ [10, 0.2], [6, 0.5], [23, 0.9],... ]。其中每个数据的一维表示时间(24小时制),二维表示信号强度。如[10, 0.2]表示十点的信号强度为0.2。现在,我们要将这些数据呈现在极坐标图(polar plot)上:

2.比例尺

我们发现,源数据的一维并不直接表示角度,二维也并不直接表示距离。那么我们需要用到比例尺。比例尺就是将某一区域的值映射到另一区域,其大小关系不变。

由于我们的区间都是连续的(连续的24小时映射到连续的360°,信号强度值映射到半径值),故这里我们用到的是线性比例尺。

 var angle = d3.scale.linear()
.domain([0, 24])
.range([0, 2 * Math.PI]); var r = d3.scale.linear()
.domain([0, max_singnal])
.range([0, radius]);

3.坐标系

为了清晰地呈现数据,绘制角度坐标轴(每45°画一条线)和半径坐标轴(半径每递增0.1画一个圆)。以及标上刻度。

// 角度坐标轴
1 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" });
// 半径坐标轴
1 var gr = svg.append("g")
.attr("class", "r axis")
.selectAll("g")
.data(r.ticks(max_singnal*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; });

4.绘制数据点

     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);
});

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>

d3.js 绘制极坐标图(polar plot)的更多相关文章

  1. 利用d3.js绘制雷达图

    利用d3,js将数据可视化,能够做到数据与代码的分离.方便以后改动数据. 这次利用d3.js绘制了一个五维的雷达图.即将多个对象的五种属性在一张图上对照. 数据写入data.csv.数据类型写入typ ...

  2. [js]d3.js绘制拓扑树

    echart也支持拓扑树了 所需的json数据格式: children嵌套 vis.js也支持绘制拓扑树 数据格式: nodes: {id, label, title} edges: {from, t ...

  3. 利用d3.js绘制中国地图

    d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...

  4. d3.js 绘制北京市地铁线路状况图(部分)

    地铁线路图的可视化一直都是路网公司的重点,今天来和大家一起绘制线路图.先上图. 点击线路按钮,显示相应的线路.点击线路图下面的站间按钮(图上未显示),上报站间故障. 首先就是制作json文件,这个文件 ...

  5. D3.js绘制平行坐标图

    参照:https://syntagmatic.github.io/parallel-coordinates/ 和 https://github.com/syntagmatic/parallel-coo ...

  6. D3.js绘制 颜色:RGB、HSL和插值 (V3版本)

    颜色和插值   计算机中的颜色,常用的标准有RGB和HSL.   RGB:色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加来得到额各式各样的颜色.三个通道的值得范围都 ...

  7. D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图

    首先需要下载安装d3.js  :  yarn add d3 然后在组建中引入 :  import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子 ...

  8. 【 D3.js 进阶系列 — 4.0 】 绘制箭头

    转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...

  9. D3.js坐标轴的绘制方法、添加坐标轴的刻度和各比例尺的坐标轴(V3版本)

    坐标轴(Axis)   坐标轴(Axis)在很多图表中都可见到,例如柱形图.折线图.散点图等.坐标轴由一组线段和文字组成,坐标轴上的点由一个坐标值确定.但是,如果使用SVG的直线和文字一笔一画的绘制坐 ...

随机推荐

  1. 天猫登录源码 POST C#

    HttpHelper 请从网络中搜索: public partial class LoginTMall : Form { public LoginTMall() { InitializeCompone ...

  2. Thinkphp回顾(五)之前台模板中的基本语法

    一.导入CSS和JS文件 的三种方式  (了解) 1.link方式(常规) <link rel=’stylesheet’ type=’text/css’ href=’__PUBLIC__/Js/ ...

  3. 使用msgfmt编译多语言文件

    msgfmt --statistics --verbose -o django.mo django.po

  4. Boostrap学习心得

    进入新公司,前端用到各种页面元素几乎都是bootStrap框架里的,下面介绍下某些页面控件怎么运用,作为知识点备份,提供有需要人观看: 首先下载bootstrap,地址http://www.bootc ...

  5. iOS 登陆的实现四种方式

    iOS 登陆的实现四种方式 一. 网页加载: http://www.cnblogs.com/tekkaman/archive/2013/02/21/2920218.ht ml [iOS登陆的实现] A ...

  6. Javascript计数器

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  7. 小白日记39:kali渗透测试之Web渗透-SQL手工注入(一)-检测方法

    SQL手工注入(一) SQL注入:通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.[SQL注入原理] ##服务端程序将用户输入参数作为查询 ...

  8. python的局部变量和全局变量

    #coding=utf-8#全局变量与局部变量 #作用域def func(): i=8#print i# print object# j=9# print j #局部变量def func(a): i= ...

  9. Week15(12月19日):授课综述2

    Part I:提问 =========================== 1.为了编辑应用程序的统一布局,可打开位于Views\Shared子目录中的(    )文件. A.MasterPage.h ...

  10. jenkins学习:jenkins的基本配置

    _(:з)∠)_,发现写了gitlab和maven ,但是jenkins的详细步骤没有. 这里整理一下. 1.下载jenkins的war包,无需FQ. 网址:https://jenkins.io/do ...