d3_v4 shape系列之Arc\Pie\Symbol

最新推荐文章于 2024-06-07 09:30:20 发布

Kotomi_5555

最新推荐文章于 2024-06-07 09:30:20 发布

阅读量761

点赞数

分类专栏： d3 前端学习

本文链接：https://blog.csdn.net/u010619243/article/details/69214812

版权

d3 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端学习

14 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>hello</title>
</head>
<body>
<canvas width="960" height="600"></canvas>
<script src="resources/js/d3_v4/d3.js"></script>
<script>
    var canvas =document.querySelector("canvas"),//querySelector() 方法仅仅返回匹配指定选择器的第一个元素
         context=canvas.getContext("2d");
    var width=canvas.width,
        height=canvas.height,
        radius=Math.min(width,height)/2;
    var color=["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"];
    var color1=d3.scaleOrdinal(d3.schemeCategory10);//这是一个function
//    color1.domain([0,6]);
//    console.log(color1(0));
    var arc=d3.arc()
        .outerRadius(radius-10)
        .innerRadius(radius-50)
        .cornerRadius(12)
        .padAngle(0.01)
        .context(context);
    var labelArc=d3.arc()
        .innerRadius(radius-40)
        .outerRadius(radius-40)
        .context(context);
    var pie=d3.pie()
        .sort(null)
        .value(function(d){return d.population});
    var cross=d3.symbol()
        .type(d3.symbolCross)
        .context(context);

    context.translate(width/2,height/2);//把焦点移动到（x,y）的位置
    //pie和arc的区别 在饼图里面填充弧线
    d3.tsv("resources/data/data.tsv"
        ,function(d){d.population=+d.population; return d;}// convert "population" column to number 变为数值型
    ,function(erro,data){
        if(erro) throw erro;
        var arcs=pie(data);
        arcs.forEach(function(d,i){
            context.beginPath();
            arc(d);
            context.closePath();
            context.fillStyle=color1(i);
            context.fill();
            });
        //画边界线
        context.beginPath();
        arcs.forEach(arc);
        context.closePath();
        context.strokeStyle="#fff";
        context.stroke();

        //画标签
            context.beginPath();
        context.textAlign="center";
        context.textBaseline="middle";
        context.fillStyle="#000";
        arcs.forEach(function(d){
            var c=labelArc.centroid(d);
            context.fillText(d.data.age,c[0],c[1]);
            context.save();
            context.translate(c[0]+10,c[1]+10);
            cross();
            context.restore();

        })
            context.closePath();
            context.fill();



    })
</script>
</body>
</html>

arc画出来的是一个面，如果要画成线，设定

innerRadius(5+cgap*rad).
outerRadius(5+cgap*rad+1)

Kotomi_5555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
d3_v4 shape系列之Arc\Pie\Symbol

hello var canvas =document.querySelector("canvas"),//querySelector() 方法仅仅返回匹配指定选择器的第一个元素 context=canvas.getContext("2d"); var width=canvas.width, height=canvas.height,
复制链接

扫一扫

专栏目录