<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. POJ2485:Highways(模板题）

    http://poj.org/problem?id=2485 Description The island nation of Flatopia is perfectly flat. Unfortun ...

  2. Bind()事件

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

  3. [LeetCode] 804. Unique Morse Code Words_Easy tag: Hash Table

    International Morse Code defines a standard encoding where each letter is mapped to a series of dots ...

  4. sqlplus与shell互相传值的几种情况

    2578人阅读   sqlplus与shell互相传值的几种情况 情况一:在shell中最简单的调用sqlplus $cat test.sh #!/bin/sh sqlplus oracle/orac ...

  5. numpy排序（sort、argsort、lexsort、partition、sorted）

    1.sort numpy.sort(a, axis=1, kind='quicksort', order=None) a :所需排序的数组 axis:数组排序时的基准,axis=0按行排列:axis= ...

  6. Leetcode: Pow(x, n) and Summary: 负数补码总结

    Implement pow(x, n). Analysis:  Time Complexity: O(LogN) Iterative code: refer to https://discuss.le ...

  7. map() 方法

    1. 方法概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 2. 例子 2.1 在字符串中使用map 在一个 String 上使用 map 方法获取字符串中每 ...

  8. JS中“==”和“===”的原理和区别

    1.为什么讨论这个问题? - 有个说法,尽量不用==,而使用===,是这样吗? 2.分析问题,原理是什么? 下面说说ECMAScript 5 language specification里的说明: 1 ...

  9. Python: 序列: 过滤序列元素

    问题: 你有一个数据序列,想利用一些规则从中提取出需要的值或者是缩短序列 answer: eg1:列表推导 最简单的过滤序列元素的方法就是使用列表推导.比如:>>> mylist = ...

  10. 记一次ping: unknown host错误

    虚拟机上一台主机,之前一直在用,可以通过xshell连接,但是忽然发现ping百度失败了! [root@mgt02 ~]# ping www.baidu.com ping: unknown host ...