<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. nodejs 将网上的图片下载到本地文件

    var request = require('request'); var fs = require('fs'); var img_src = 'https://www.baidu.com/img/b ...

  2. http协议基础（十）实体首部字段

    1.定义 包含在请求和响应中的实体部分所使用的首部,用于补充内容的更新时间等与实体相关的信息 2.Allow 通知客户端能够支持的Request-URI指定资源的所有http方法:如果服务器接收到不支 ...

  3. pdo sqlserver

    PHP代码如果想要用以上的方式兼容linux服务器和windows服务器,那么大概的示例代码是这样的. <?php header("Content-type: text/html; c ...

  4. UVALive - 7269 I - Snake Carpet

    思路: 多画画就发现从五的时候可以这么填: 六的时候这么填: 七的时候这么填: 看出规律了吗? 没看出的话再画画把. #include <bits/stdc++.h> using name ...

  5. EditPlus 4.3.2555 中文版已经发布

    新的版本修复了之前版本出现的多行文本缩进调整的问题. 下载连接在页面左上角!

  6. Linux下的Make命令实例详解

    众所周知在Linux系统下的make 命令是系统管理员和程序员用的最频繁的命令之一.管理员用它通过命令行来编译和安装很多开源的工具,程序员用它来管理他们大型复杂的项目编译问题.下面这 篇文章我们将用一 ...

  7. Java(16-19）

    0. 正则表达式: str.matches()  //判断字符串是否匹配 str.split()  // 根据给定正则表达式的匹配规则.拆分此字符串,返回字符串数组. str.replaceAll() ...

  8. Linux基础命令---fold

    fold 按照指定的宽度显示文件. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法       fold [选项]  fil ...

  9. 小黄人IP营销的四种玩法思维导图

    小黄人IP营销的四种玩法思维导图 ------------------------------ 本人微信公众帐号: 心禅道(xinchandao) 本人微信公众帐号:双色球预测合买(ssqyuce)

  10. java commons.lang3 ArrayUtils使用

    java commons.lang3 ArrayUtils使用import org.apache.commons.lang3.ArrayUtils; /** *数组追加数组,不重复 */ public ...