<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 画圆的更多相关文章

  1. WebGIS中基于AGS的画圆查询简析以及通过Polygon来构造圆的算法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 某个项目需求中需要在前端进行画圆查询,将圆范围上的多边形要素 ...

  2. 《图形学》实验六：中点Bresenham算法画圆

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 500 ...

  3. ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆

    一.前言 吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半 ...

  4. canvas入门（画圆）

    1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas>   接着需 ...

  5. 【openGL】画圆

    #include "stdafx.h" #include <GL/glut.h> #include <stdlib.h> #include <math ...

  6. javascript画直线和画圆的方法（非HTML5的方法）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【液晶模块系列基础视频】4.1.X-GUI图形界面库-画线画圆等函数简介

    [液晶模块系列基础视频]4.1.X-GUI图形界面库-画线画圆等函数简介 ============================== 技术论坛:http://www.eeschool.org 博客地 ...

  8. 在AE中通过指定中心点和半径画圆

    /// <summary>/// 通过指定的中心点.半径画圆/// </summary>/// <param name="pLayer">要画的 ...

  9. 纯JS画点、画线、画圆的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. OpenGL 3：画圆

    这次使用OpenGL画圆,而且中间画一个实心的五角星. 1. 画实心五角: 由于之前使用Polygen画会出现故障,或许是各个GPU硬件也会不一样的,所以使用Polygen画实心五角星并不可靠: 所以 ...

随机推荐

  1. 复习一下property

    在面向对象程序里,一个对象不要直接访问另一个对象内部的数据.所以我们使用accessor methods来进行对象内部的数据交互. accessor methods(getters and sette ...

  2. iOS 网易彩票-5设置模块二

    产品推荐 产品推荐使用的是UICollectionView控件,UICollectionView 和 UICollectionViewController 类是iOS6 新引进的API,用于展示集合视 ...

  3. mysql主从延迟（摘自http://www.linuxidc.com/Linux/2012-02/53995.htm）

    http://www.linuxidc.com/Linux/2012-02/53995.htm

  4. mysql回滚日志

    一.回滚日志(undo log) 1.作用 保存了事务发生之前的数据的一个版本,可以用于回滚,同时可以提供多版本并发控制下的读(MVCC),也即非锁定读 2.内容 逻辑格式的日志,在执行undo的时候 ...

  5. font-awesome图标

  6. 解决nginx下不能require根目录以外的文件

    我们常规的做法是将统一入口文件.css.js这些放在网站根木,其他php文件放到根目录外部,这个时候nginx访问是require不到的,需要设定一下 1.vi  /usr/local/nginx/c ...

  7. vs2013中将原来在iis express中的网站转到iis中时，报“无法在web服务器上调试”的解决方法

    之前在网上也搜索过,但没有一个是正确的,后来在微软网站上发现问题的解决方法: 在web.config中,打开调试就可以了,具体方法为: 在web.config中 在以下配置节中加入以下代码 <c ...

  8. python json-json.loads()函数中的字符串需要是严格的json串格式，不能包含单引号

    先看下json的dumps()和loads()函数的定义 json.dumps():将一个Python对象编码成JSON字符串.把字典对象转换成json串 json.loads():将JSON格式字符 ...

  9. Python3.x（windows系统）安装requests库

    Python3.x(windows系统)安装requests库 cmd命令: pip install requests 执行结果:

  10. servlet+jsp+java实现Web应用

    servlet+jsp+java实现Web应用 环境: 1,eclipse 2,tomcat3,eclipse tomcat 插件 开发过程: 1,建立一个Dynamic Web Project 2, ...