vue centos8 wpf axios swiftui db2 Zeptojs bootstrap后台模版 mysql安装后怎么使用 oracle限制查询条数 git登陆命令 cad怎么重复上一次命令 mac上传文件到linux python相对路径怎么写 python写脚本 python安装环境变量 java学习手册 java数组扩容 java集合转数组 地球末日攻略 maxtoc4d 无限视距 tar解压 spss20安装教程 pr调整图层 vscode全局搜索 苹果手机验机软件 国都证券官网下载 deepcopy directx卸载 0000008e 鼠标速度怎么调 大势至usb控制系统 js继承的几种方式 色阶快捷键 3dmax布尔运算 反转字符串 迅捷pdf转换器官网 ps错误16 c4d克隆
当前位置: 首页 > 学习教程  > 编程学习

d3图表中饼图的使用示例

2021/1/9 2:17:03 文章标签: 复合条饼图

d3是一款功能强大的数据可视化库,为我们提供了多种样式的数据显示格式,具体请参考官网:https://d3js.org/ 饼状图是很常见的数据表格,可以清晰的展示各个部分占总体的多少。 效果图: 在线演示:http://www…

d3是一款功能强大的数据可视化库,为我们提供了多种样式的数据显示格式,具体请参考官网:https://d3js.org/

饼状图是很常见的数据表格,可以清晰的展示各个部分占总体的多少。

效果图: 在线演示:http://www.justforuse.cn/d3/d3.pie/
源代码右键查看即可。

这里写图片描述
首先需要引入d3.v3.js,我用的是v3版本,最新的是v4版本,有些函数用法有差异需要注意。

下面代码需要读者了解d3基础的语法,这里只简单的说下用法,另外一些需要自行查看API。

代码:

<body>
    <script>
    var width = 500,
        height = 500;
    var data = [10, 20, 50, 30, 80];
    // sort函数自动隐式执行降序排列,而且数据从顶部开始顺时针展示,传入null可以阻止排序
    var pie = d3.layout.pie().sort(null);
    //定义了10中颜色主题
    var color = d3.scale.category10();
    var svg = d3.select("body").append("svg").attr("width", width + 100).attr("height", height + 100);
    //定义外半径
    var outerRadius = width / 2;
    //定义内半径
    var innerRadius = width / 4;
    //定义路径
    var arc = d3.svg.arc()
        .innerRadius(innerRadius)
        .outerRadius(outerRadius);

    //定义了另一种路径函数
    var arc2 = d3.svg.arc()
        .innerRadius(innerRadius - 10)
        .outerRadius(outerRadius + 20)

    var arcs = svg.selectAll("g")
        .data(pie(data))
        .enter()
        .append("g")
        // 将饼图中心(SVG起点)移至中间
        .attr("transform", "translate(" + (outerRadius+30)  + "," + (outerRadius+50) + ")")
        //为每一块元素添加鼠标事件
        .on("mouseover", function(d) {

            d3.select(this).select("path").transition().attr("d", function(d) {
                console.log(d);
                return arc2(d);
            })
        })
        .on("mouseout", function(d){
            d3.select(this).select("path").transition().attr("d", function(d){
                return arc(d);
            })
        })
    arcs.append("path")
        .attr("fill", function(d, i) {
            return color(i);
        })
        .attr("d", function(d) {
            return arc(d);
        })
    arcs.append("text")
        .attr("transform", function(d) {
            return "translate(" + arc.centroid(d) + ")";
        })
        .attr("text-anchor", "middle")
        .text(function(d) {
            return d.value;
        })
    </script>
</body>

d3的图标是用SVG画的,可能会很奇怪,body里也没有svg标签啊,但是注意这行代码:

var svg = d3.select("body").append("svg").attr("width", width + 100).attr("height", height + 100);

是不是很像jQuery中的添加元素链式操作?这行代码就是在body元素内添加了svg元素,并为其设置了宽度和高度。

我们初始化了一组数据,var data = [10, 20, 50, 30, 80];,然后使用var pie = d3.layout.pie().sort(null); 设置了数据展现格式,pie()就是饼图结构。

var arcs = svg.selectAll("g")
        .data(pie(data))
        .enter()
        .append("g")
        // 将饼图中心(SVG起点)移至中间
        .attr("transform", "translate(" + (outerRadius+30)  + "," + (outerRadius+50) + ")")

这行操作将数据data进行了格式化操作pie(data)然后将它传给data()函数,这样我们就把数据传进了svg元素中,只需后面将它们“描绘”出来。其中的enter()函数为每个多出来的数据分配了g标签。

arcs.append("path")
        .attr("fill", function(d,+ i) {
            return color(i);
        })
        .attr("d", function(d) {
            return arc(d);
        })
    arcs.append("text")
        .attr("transform", function(d) {
            return "translate(" + arc.centroid(d) + ")";
        })
        .attr("text-anchor", "middle")
        .text(function(d) {
            return d.value;
        })

这两行代码分别在svg元素中按照传进来的格式化后的data描绘出他们的区域(path)以及添加文本内容(text)。

另外我们还为没个元素添加了鼠标移入和鼠标移除事件:

.on("mouseover", function(d) {
       d3.select(this).select("path").transition().attr("d", function(d) {
                console.log(d);
                return arc2(d);
            })
        })
        .on("mouseout", function(d){
            d3.select(this).select("path").transition().attr("d", function(d){
                return arc(d);
            })
        })

效果就是鼠标移入的时候区域变大,移出则恢复原状。


本文链接: http://www.dtmao.cc/news_show_1100425.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?