<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. SQLserver数据库连接问题

    可能安装好之后数据库的端口1433被防火墙拦截了,查看端口是否在监听当中: 在cmd里输入命令 :netstat -an 查看是否处在监听中,如果没有进入下面的设置, C:\Windows\SysWO ...

  2. Linux实验楼学习之一

    查看当前所在目录 pwd 创建文件:1-1.txt touch 1-1.txt 进入统计目录下的etc目录 cd /etc 强行终止当前程序 Ctrl + c 常用快捷键 按键 作用 Ctrl+d 键 ...

  3. python -- 解决If using all scalar values, you must pass an index问题

    [问题描述] 在将dict转为DataFrame时会报错:If using all scalar values, you must pass an index 例如: summary = pd.Dat ...

  4. winform dataGridView DataGridViewComboBoxColumn 下拉框事件代码

    有一个dataGridView ,有一列是DataGridViewComboBoxColumn .我用动态绑定,在绑定数据的时候.我们也给这一列绑定数据 在dataGridView的RowsAdded ...

  5. Lintcode: k Sum II

    Given n unique integers, number k (1<=k<=n) and target. Find all possible k integers where the ...

  6. eclipse调优

    基于Eclipse 4.7.0 (Oxygen) 目的:加快eclipse启动速度 修改eclipse安装目录下配置文件eclipse.ini(1)指定eclipse运行的jre,不让其进行搜索-vm ...

  7. html5设置全屏模式--开发游戏必备

    <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> ...

  8. python 模拟windows键盘按键的封装

    代码:在执行的时候,把光标放在指定的地方,在此例中,点击运行后把光标放到结果区域,粘贴的时候是粘贴到光标所在的问题,如过是运行脚本在web元素输入框中输入的话,不能移动光标到其他位置 #encodin ...

  9. C/C++之static函数与普通函数

    全局变量(外部变量)的说明之前再冠以static 就构成了静态的全局变量.全局变量本身就是静态存储方式, 静态全局变量当然也是静态存储方式.这两者在存储方式上并无不同.这两者的区别虽在于非静态全局变量 ...

  10. Python安装selenium，配置火狐浏览器环境

    想用Python去编写自动化脚本进行网页访问时,遇到了一些问题, File "C:\Python34\lib\site-packages\selenium-3.0.0b2-py3.4.egg ...