【D3.js】极坐标系下的柱状图

极坐标系的柱状图

虽然标题是柱状图，但其实使用arc饼图生成器画得，所以感觉叫饼图也可以~~

预览

LIVE DEMO

API

使用到的部分api

d3.scaleLinear

线性比例尺，类似一个线性函数，通过domain属性定义输入域，range属性定义值域，例如：

var x = d3.scaleLinear()
    .domain([10, 130])
    .range([0, 960]);

x(20); // 80
x(50); // 320

d3.scaleBand

分段比例尺，和scaleLinear作用类似，不过输入域domain不是连续的数据，而是一个数组，通过数组长度，将值域分成多个段，例如：

var x = d3.scaleBand()
    .domain([1,2,3,4])
    .range([0,100])

x(1) // 0
x(2) // 25
x(4) // 75

d3.mouse

d3.mouse(container)返回一个包含x和y坐标的数组，坐标相对于指定的container元素，可以是html元素或svg元素。

d3.arc

常配合d3.pieapi使用
用于在饼图或环形图中生成圆形、圆环、扇形。一个扇形需要指定起始角度、终止角度、内半径、外半径等。还有一些不常用的属性，例如扇形的拐角半径，间隔半径，间隔角度等。example:

var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);

arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

d3.pie

将一组数组转换为生成饼图和环形图需要的数据，这些角度信息可以被传递给arc生成器。example：

var data = [1, 1, 2, 3, 5, 8, 13, 21]
var arcs = d3.pie()(data)

// arcs 数据
[
  {
   
   "data":  1, "value":  1, "index": 6, "startAngle": 6.050474740247008, "endAngle": 6.166830023713296, "padAngle": 0},
  {
   
   "data":  1, "value":  1, "index": 7, "startAngle": 6.166830023713296, "endAngle": 6.283185307179584, "padAngle": 0},
  {
   
   "data":  2, "value":  2, "index": 5, "startAngle": 5.817764173314431, "endAngle": 6.050474740247008, "padAngle": 0},
  {
   
   "data":  3, "value":  3, "index": 4, "startAngle": 5.468698322915565, "endAngle": 5.817764173314431, "padAngle": 0},
  {
   
   "data":  5, "value":  5, "index": 3, "startAngle": 4.886921905584122, "endAngle": 5.468698322915565, "padAngle": 0},
  {
   
   "data":  8, "value":  8, "index": 2, "startAngle": 3.956079637853813, "endAngle": 4.886921905584122, "padAngle": 0},
  {
   
   "data": 13, "value": 13, "index": 1, "startAngle"