d3.js v5版本——饼图 简单饼图

记录一下这个饼图的写法

simplePie.png

画饼图就是扇形+文字的组合。就两个知识点的运用:

1.饼图布局d3.pie()

2.弧形生成器d3.arc()

直接先贴代码

<body>
  <svg height="960" width="800"></svg>

  <script>
    initMap();
    function initMap() {
      var marge = { top: 60, right: 60, bottom: 60, left: 60 },
          svg = d3.select('svg'),
          width = svg.attr('width'),
          height = svg.attr('height');
      
      var g = svg.append('g')
          .attr('transform', 'translate('+ marge.top +', '+ marge.left +')')

      var dataset = [25, 15, 33, 68, 18]

      // 一个颜色比例尺
      var colorScale = d3.scaleOrdinal()
          .domain(d3.range(dataset.length))
          .range(d3.schemeCategory10);

      // 饼图布局
      var pie = d3.pie();
      // 弧线生成器
      var innerRadius = 0;    // 内半径
      var outerRadius = 100;  // 外半径
      var arc_generator = d3.arc()
          .innerRadius(innerRadius)
          .outerRadius(outerRadius);

      // 通过饼图布局转换数据
      var pieDate = pie(dataset);
      console.log("pieDate:" + pieDate);

      // ***************绘制******************
      var gs = g.selectAll('.g')
          .data(pieDate)
          .enter()
          .append('g')
          .attr('transform', 'translate('+ width / 2 +', '+ height / 2 +')')

      // 绘制扇形
      gs.append('path')
          .attr('d', function (d) {
            return arc_generator(d);
          })
          .attr('fill', function (d, i) {
            return colorScale(i);   // 设置颜色
          })
      // 添加文字
      gs.append('text')
            .attr('transform', function (d) {
              return 'translate('+ arc_generator.centroid(d) +')';    // 中心位置
            })
            .attr('text-anchor', 'middle')
            .attr('fill', '#eee')
            .text(function (d, i) {
              return d.data;
            })
    }
  </script>
</body>

创建这个饼图的步骤和其他的图都是一样的

1.先利用布局将数据转换为画图可以用的数据格式,这里d3.pie()就可以将简单的数组数据转化为换扇形需要的数据格式

2.再利用弧线生气器画出扇形。这里设置了两个属性:innerRadius和outerRadius。 分别时扇形内半径和外半径。如果这里将innerRadius设置为80,画出的饼图就会使下面这样

simplePie2.png

目前这个简单的饼图就没什么好说的了。但这样最最基本的饼图也只能学习的时候做出来才能有一点点的满足感。放在真正的项目中就显得太初级了,到时候就你得需要对细节的处理更多了,当然也要用到更多的api方法和属性了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • d3 (核心部分)选择集d3.select - 从当前文档中选择一系列元素。d3.selectAll - 从当前文...
    谢大见阅读 3,516评论 1 4
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,030评论 3 119
  • 超哥别号 踏雪孤心不老情落拓书生自嘲心逍觉迷遥修行路登徒浪子窃诗贼小超童邪20170313
    WallisW阅读 190评论 0 0
  • 三十岁之前,我一直彷徨困惑着,因为生事不幸,婚姻不动,我无数次怀疑过人生,怀疑自己不该来这人世间。直到孩子的降临,...
    红太狼一家阅读 220评论 0 0
  • 近几年,律师职业并没有以其想象力或跨公司合作而闻名。 事实上,一位经验丰富的律师一次提醒我说:“客户最不需要就是富...
    就有同校的朋阅读 127评论 0 0