<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. python内置函数大全（分类）

    python内置函数大全 python内建函数 最近一直在看python的document,打算在基础方面重点看一下python的keyword.Build-in Function.Build-in ...

  2. 浏览器测试string是否为图片

    在浏览器中直接打如下代码.其中adcd为图片转成的string data:image/jpeg;base64,abcd

  3. jQuery delay() 方法

    定义和用法 delay() 方法对队列中的下一项的执行设置延迟. 语法 $(selector).delay(speed,queueName) 参数 描述 speed 可选.规定延迟的速度. 可能的值: ...

  4. linux导出、导入sql

    linux下导入.导出mysql数据库命令 一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径): 1.导出数据和表结构: mysqldump -u用户名 -p密码 数据 ...

  5. uva1201 DAG 最小路径覆盖，转化为 二分图

    大白例题P356 你在一座城市里负责一个大型活动的接待工作.你需要去送m个人从出发地到目的地,已知每个人的出发时间出发地点,和目的地点,你的任务是用尽量少的出租车送他们,使得每次出租车接客人,至少能提 ...

  6. FAFU 1136 最长递增子序列

    http://acm.fafu.edu.cn/problem.php?id=1136 根据dp建边,建边的时候记得判断如果原本数的大小就ok了 好久没在自家OJ上刷了 #include <ios ...

  7. spring mvc interceptors

    <mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/**"/> <mvc:e ...

  8. cmd中mysql中文乱码问题

    以下为自己亲试: 解决cmd中MySQL查询和命令返回的中文乱码问题 1.修改cmd字符集方法 rem 切换到UTF-8 chcp 65001 rem 切换到默认的GBK chcp 936 rem 美 ...

  9. python 正则表达式匹配ip

    >>> re.match(r'^(([1-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}([1-9]|[1-9]\d|1\d\d|2[0-4]\d| ...

  10. Linux基础命令---dump

    dump 检查ext2/3/4文件系统,确定哪些文件需要备份,这些需要备份的文件将会被复制到指定的磁盘或者其他存储介质.dump检查Ext 2/3/4文件系统上的文件,并确定哪些文件需要备份.这些文件 ...