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. UVa 369 - Combinations

    题目大意:给两个数n, m,求C(n, m).用java直接写就好了. import java.io.*; import java.util.*; import java.math.*; class ...

  2. XML解析之SAX解析技术案例

    Java代码: package com.xushouwei.xml; import java.io.File; import java.io.IOException; import java.text ...

  3. 排序问题思考（要求时间和空间复杂度尽可能的低）【Part 2】

    继上篇博文,今天我将先介绍一下什么是计数排序,将计数排序描述清楚后,再进行后续的桶排序方法解决这个问题. 通常情况下,一提到排序,大家第一反应就是比较,其实,今天我要说的这个计数排序,不是基于比较的排 ...

  4. HDU-2502-月之数

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2502 分析: 比如n=4时,有: 1000 1001 1010 1011 1100 1101 1110 ...

  5. javascript window.confirm确认 取消对话框实现代码小结

    本文章讲述的三种都是基于了javascript confirm提示确认框的做法了,只是在不同的地方写哦,有需要的同学可参考一下   confirm() 方法 confirm() 方法用于显示一个带有指 ...

  6. hadoop学习笔记--集群搭建

    注:大家常说的ssh其实就是一个免密码访问的东西,为了简化操作的,不用每次访问其他节点重新输入密码.但是要想配置如下: .在每台机器上执行 ssh-keygen -t rsa,连敲三次回车键(即设置空 ...

  7. JSP/Servlet(一)

    JSP/Servlet(一)   Web应用和web.xml文件: 一.构建Web应用: 1.在任意目录下创建一个文件夹. 2.在第1步所建的文件夹内建一个WEB-INF文件夹(注意大小写). 3.进 ...

  8. nw.js桌面程序自动更新（node.js表白记）

    Hello Google Node.js 一个基于Google V8 的JavaScript引擎. 一个伟大的端至端语言,或许我对你的热爱源自于web这门极富情感的技术吧! 注: 光阴似水,人生若梦, ...

  9. Mysql-Proxy代理配置

    一.Mysql-Proxy原理 Mysql-Proxy是一个处于你的client端和Mysql Server端之间的一个简单程序,它可以监测.分析和改变他们的通信.它使用灵活没有限制,常见的用途包括: ...

  10. js实现360度图片旋转

    ▓▓▓▓▓▓ 大致介绍 这次是一个简单的效果,就是思路的问题 效果: ▓▓▓▓▓▓ 思路 旋转的效果就是根据鼠标的的移动距离来显示不同的图片,形成视觉差,仿佛就是在正真的旋转 由于效果是根据鼠标的移动 ...