0.引言

1.数据

2.比例尺

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

var r = d3.scale.linear()
.domain([0, max_singnal])

3.坐标系

```// 角度坐标轴 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")

ga.append("text")
.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();

.angle(function(d) {
return angle(d[0]);
})
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])

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")

ga.append("text")
.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();

.angle(function(d) {
return angle(d[0]);
})
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回顾(五)之前台模板中的基本语法

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计数器

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 ...