数据可视化 d3js学习之简单的饼图

原创 2015年07月10日 10:56:25

使用d3js(v3)实现带坐标轴且基于数据驱动的简单饼图。

JS代码

  <script>

        var width = 375;
        var height = 375;
        var padding = 25;
        var padAngle = 0.01;
        var moveValue = 5;
        var pie = d3.layout.pie();
        var color = d3.scale.category10();
        var outerRadius = (width - 2 * padding) / 2;
        var innerRadius = (width - 2 * padding) / 4;


        window.onload = function () {
            var dataset = [30, 10, 43, 55, 13];

            paintPie(dataset);

        };

        function paintPie(data) {
            d3.select("body").select("svg").data([data]).enter().append("svg")
                .attr("width", width)
                .attr("height", height);


            var dataset = data;

            var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);



            var arcs = d3.select("svg").selectAll("g").data(pie(dataset));

            arcs.exit().remove();

            var arcsEnter = arcs.enter()
                .append("g")
                .attr("transform", "translate(" + (outerRadius + padding) + "," + (outerRadius + padding) + ")");

            arcsEnter.append("path");


            arcs.select("path")
                .attr("fill", function (d, i) {
                    return color(i);
                }).attr("d", function (d) {
                    d.padAngle = 0.01;
                    return arc(d);
                }).on("mouseover", function (d) {
                    var path = d3.select(this);
                    var centroid = arc.centroid(d);
                    var tranlate = calTranslate(centroid, moveValue);
                    path.attr("transform", "translate(" + tranlate.x + "," + tranlate.y + ")");
                }).on("mouseout", function () {
                    var path = d3.select(this);
                    path.attr("transform", "translate(0,0)");
                });

            arcsEnter.append("text");

            arcs.select("text").attr("text-anchor", "middle")
                .text(function (d) {
                    return d.value;
                }).transition().duration(500)
                .attr("transform", function (d) {
                    return "translate(" + arc.centroid(d) + ")";
                });
        }

        //计算偏移(x,y)
        function calTranslate(centroid, d) {
            var tranlate = {};
            var x = Math.sqrt(Math.pow(d, 2) / (1 + Math.pow(centroid[1], 2) / Math.pow(centroid[0], 2)));
            tranlate.x = x;
            if (centroid[0] < 0) {
                tranlate.x = -x;
            }
            tranlate.y = tranlate.x * centroid[1] / centroid[0];
            return tranlate;
        }

        function redraw() {
            var dataset = [20, 10, 43, 55];
            paintPie(dataset);
        }



    </script>


HTML:
<body>
    <button onclick="redraw();">重绘</button>
</body>

效果图:


 


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

数据可视化 d3js学习之简单的柱状图(bar)

摘要:使用d3js(v3)实现带坐标轴且基于数据驱动的简单柱状图。此demo用于本人理解基于数据进行可视化的enter()、exit()方法,d3.scale对象定义映射(比例尺),d3.svg.ax...

用D3.js进行医疗数据可视化 (五) 饼图 (Pie Chart)

介绍 经过一系列对折线图的试验,这儿就来尝试一下用饼图(Pie Chart)来做医疗数据的可视化。在《用D3.js进行医疗数据可视化 (四) 堆积区图(Stacked Area Chart)》的图2中...
  • eengel
  • eengel
  • 2015-08-03 17:05
  • 3399

数据可视化库d3js

  • 2013-04-11 09:43
  • 2.23MB
  • 下载

D3 数据可视化的简单例子

D3.js可以很好地展示数据,并绘制成各种表格,一个简单例子如下: 做一个简单的图表 var width = 300; //画布的宽度 var...

Python进阶(三十八)-数据可视化の利用matplotlib 进行折线图,直方图和饼图的绘制

Python进阶(三十八)-数据可视化の利用python进行折线图,直方图和饼图的绘制  我用10个国家某年的GDP来绘图,数据如下: labels = [‘USA’, ‘China’, ‘In...

Echarts数据可视化series-pie饼图,开发全解+完美注释

mytextStyle={ color:"#333",//文字颜色 fontStyle:"normal",//italic斜体 oblique倾斜 fontWeight:"n...

【D3.js数据可视化系列教程】(二十四)--力导向图

力导向图
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)