码迷,mamicode.com
首页 > Web开发 > 详细

html 画圆

时间:2018-11-09 12:12:14      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:sel   function   idt   pre   javascrip   nsf   min   UNC   nbsp   

 

<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>

  

html 画圆

标签:sel   function   idt   pre   javascrip   nsf   min   UNC   nbsp   

原文地址:https://www.cnblogs.com/sea-stream/p/9934236.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!