第一版残缺数据嵌套饼图

app/assets/javascripts/unintegration/MultistagePieChart.coffee

@@ -0,0 +1,70 @@
+@MultistagePieChart = React.createClass
+  render: ->
+    <div className="multistage-pie-chart">
+    </div>
+
+  make_pie_chart: (datas, inner_radius, outer_radius, deep)->
+    pie = d3.layout.pie().sort(null).value (datas)->
+      return datas.count
+    piedata = pie(datas)
+    arc = d3.svg.arc().innerRadius(inner_radius).outerRadius(outer_radius)
+
+    arcs = @svg.selectAll("g#{deep}")
+      .data(piedata)
+      .enter()
+      .append("g")
+      .attr("transform", "translate(" + @width/2 + "," + @width/2 + ")")
+
+    arcs.append("path")
+      .attr "fill", (d, i)=>
+        @unique_color_index.push(@unique_color_index[@unique_color_index.length - 1] + 1)
+        return @colors_maker(@unique_color_index[@unique_color_index.length - 1])
+      .attr "d", (d)->
+        return arc(d)
+      .on 'mouseover', (d)=>
+        outer_dom = d3.event.target
+        text_dom = jQuery(outer_dom).closest('g').find('text')[0]
+        @tip.show(d, text_dom)
+        jQuery(".d3-tip").css("pointer-events", "none")
+      .on 'mouseout', (d)=>
+        @tip.hide(d)
+      .attr "style", (d)=>
+        if !d.data.display
+          return "display: none;"
+
+    arcs.append("text")
+      .attr "transform", (d)->
+        x = arc.centroid(d)[0] * 1
+        y = arc.centroid(d)[1] * 1
+        return "translate(" + x + "," + y + ")"
+      .attr("text-anchor", "middle")
+      .attr("style", "pointer-events: none;")
+      .text (d)->
+        return d.data.name
+
+  componentDidMount: ->
+    @width = 800
+    @height = 800
+    dataset = @props.data.multistage_pie
+    diameters = [0]
+    @unique_color_index = [0]
+    @colors_maker = d3.scale.category20c()
+
+    @tip = d3.tip()
+      .attr('class', 'd3-tip')
+      .offset([-10, 0])
+      .html (d)->
+        "名称：" + d.data.name + "</br>数值：" + d.data.count
+
+    @svg = d3.select(".multistage-pie-chart").append('svg')
+      .attr('width', @width)
+      .attr('height', @height)
+    @svg.call(@tip)
+
+    for item in dataset
+      index = dataset.indexOf item
+      #  每一层级半径+100
+      diameters.push(diameters[diameters.length - 1] + 100)
+      @make_pie_chart(item, diameters[index], diameters[index + 1], index)
+
+

app/controllers/unintegration_controller.rb

@@ -74,6 +74,57 @@ def trend_chart
     }
   end
 
+  def multistage_pie_chart
+    @component_name = 'multistage_pie_chart'
+    @component_data = {
+      multistage_pie: [
+        [
+          { name: '男',   count: 40, display: true }, 
+          { name: '女',   count: 60, display: true }
+        ],
+
+        [
+          { name: '男-儿童',   count: 12, display: true  },
+          { name: '男-老人',   count: 4,  display: true  },
+          { name: '',          count: 24, display: false },  
+          { name: '女-儿童',   count: 18, display: true  }, 
+          { name: '女-中年',   count: 36, display: true  }, 
+          { name: '女-老人',   count: 6,  display: true  }  
+        ],
+
+        [
+          { name: '儿童a',   count: 10, display: true  },
+          { name: '',        count: 2,  display: false },
+          { name: '老人a',   count: 2,  display: true  },
+          { name: '老人b',   count: 2,  display: true  },
+          { name: '',        count: 24, display: false },
+          { name: '儿童p',   count: 5,  display: true  },
+          { name: '',        count: 13, display: false },  
+          { name: '中年m',   count: 30, display: true  },
+          { name: '中年n',   count: 6,  display: true  },  
+          { name: '老人i',   count: 4,  display: true  },
+          { name: '老人l',   count: 2,  display: true  }  
+        ],
+
+        [
+          { name: '儿童a-1', count: 3,  display: true },
+          { name: '',        count: 7,  display: false },
+          { name: '',        count: 2,  display: false },
+          { name: '',        count: 2,  display: false },
+          { name: '老人b-1', count: 1,  display: true  },
+          { name: '',        count: 1,  display: false },
+          { name: '',        count: 24, display: false },
+          { name: '',        count: 5,  display: false },
+          { name: '',        count: 13, display: false },  
+          { name: '',        count: 30, display: false },
+          { name: '',        count: 6,  display: false },  
+          { name: '',        count: 4,  display: false },
+          { name: '',        count: 2,  display: false }  
+        ]
+      ]
+    }
+  end
+
   # 打分
   def star_bar
     @component_name = 'star_bar'
@@ -89,4 +140,6 @@ def star_bar_post_star_count
       current_star_count: params[:star_count],
     }
   end
+
+
 end

config/routes_unintegration.rb

@@ -18,4 +18,7 @@
   # 评分组件
   get '/unintegration/star_bar', to: 'unintegration#star_bar'
   post '/unintegration/star_bar_post_star_count', to: 'unintegration#star_bar_post_star_count'
+
+  # 多级饼图
+  get '/unintegration/multistage_pie_chart', to: 'unintegration#multistage_pie_chart'
 end