Pie Chart

屏幕快照 2018-11-19 下午1.34.14.png
屏幕快照 2018-11-19 下午1.41.17.png
饼图的实现是先根据元数据中对象数组的某个属性的值提取的数组，统计数组出现的次数生成另一个对象数组，key值代表原数组中的值，value代表该值出现的次数，可以展示单个变量的分布规律。
实现的方式首先是对象数组的生成，这里首先读入所选择变量在CSV文件所在“列”的内容存为一个数组，然后判断数组的内容是否存在于想要的对象数组序列化的JSON字符串，如果不存在就新建key值为该内容的值，value值为1的一个对象，将这个对象放入该对象数组之中，如果存在就找到对象数组中的对应项并将其值加1。
一个数据项用一个扇形来表示，多个数据项的和就是一个完整的圆。所以绘制饼图就是绘制与各数据项对应的扇形，每个扇形都有一个起始角度和结束角度，计算每个扇形的起始角度和结束角度可以用布局器d3.pie()来做，其中又可以通过d3.pie().value()来设置布局器的取值过滤器，这么做的好处是输入数据仍然与返回的对象相关联，从而使访问数据的其他字段更加容易，例如添加鼠标hover事件的标签。进过布局器转化的数据就变成了带有各个属性例如startAngle、endAngle、padAngle、value、index 等的对象数组。<svg>没有现成的“扇形”元素，所以需要借助<path>标签来定义任意路径来绘制圆形，所以我直接调用d3提供的弧生成器来生成路径，arc接受含有startAngle、endAngle、padAngle属性的对象，返回值为<path>d属性。画出扇形后添加外半径的横纵平移在进行填充颜色就可以显示出来，关于鼠标hover事件与之前的类似。

//部分关键代码
var arcs = svg.selectAll("g.arc")
    .data(pie.value(function(d){return d.value;})(piedata))
    .enter()
    .append("g")
    .attr("class","src")
    .attr("transform","translate("+outerRadius+","+outerRadius+")"); 
    arcs.append("path")
        .attr("fill",function(d,i){
            return color(i);
        })
        .attr("d",arc);