D3.js圆形图

沃梦达教程前端实例代码

1970-01-01

htmlheadscript type = text/javascript src = https://d3js.org/d3.v4.min.js/script

编程学习网为您整理以下代码实例，主要实现：D3.js圆形图，希望可以帮到各位朋友。

<HTML>
   <head>
      <script type = "text/JavaScript" src = "https://d3Js.org/d3.v4.min.Js"></script>
   </head>

   <body>
      <script>
         var wIDth = 400;

         var height = 400;

         var data = [10, 20, 30];

         var colors = ['green', 'purple', 'yellow'];

         var svg = d3
            .select("body")
            .append("svg")
            .attr("wIDth", wIDth)
            .attr("height", height);

         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function(d, i) {
               return "translate(0,0)";
            })

         g.append("circle").attr("cx", function(d, i) {
            return i*75 + 50;
         })

         .attr("cy", function(d, i) {
            return 75;
         })

         .attr("r", function(d) {
            return d*1.5;
         })

         .attr("fill", function(d, i){
            return colors[i];
         })

         g.append("text").attr("x", function(d, i) {
            return i * 75 + 25;
         })

         .attr("y", 80)
         .attr("stroke", "teal")
         .attr("Font-size", "10px")
         .attr("Font-family", "sans-serif").text(function(d) {
            return d;
         });
      </script>
   </body>
</HTML>

沃梦达教程

本文标题为：D3.js圆形图

上一篇： D3.js条形图

下一篇： D3.js数组API