html 画圆
<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 画圆的更多相关文章
- WebGIS中基于AGS的画圆查询简析以及通过Polygon来构造圆的算法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 某个项目需求中需要在前端进行画圆查询,将圆范围上的多边形要素 ...
- 《图形学》实验六:中点Bresenham算法画圆
开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 500 ...
- ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆
一.前言 吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半 ...
- canvas入门(画圆)
1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas> 接着需 ...
- 【openGL】画圆
#include "stdafx.h" #include <GL/glut.h> #include <stdlib.h> #include <math ...
- javascript画直线和画圆的方法(非HTML5的方法)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【液晶模块系列基础视频】4.1.X-GUI图形界面库-画线画圆等函数简介
[液晶模块系列基础视频]4.1.X-GUI图形界面库-画线画圆等函数简介 ============================== 技术论坛:http://www.eeschool.org 博客地 ...
- 在AE中通过指定中心点和半径画圆
/// <summary>/// 通过指定的中心点.半径画圆/// </summary>/// <param name="pLayer">要画的 ...
- 纯JS画点、画线、画圆的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- OpenGL 3:画圆
这次使用OpenGL画圆,而且中间画一个实心的五角星. 1. 画实心五角: 由于之前使用Polygen画会出现故障,或许是各个GPU硬件也会不一样的,所以使用Polygen画实心五角星并不可靠: 所以 ...
随机推荐
- [LeetCode] 112. Path Sum_Easy tag: DFS
Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...
- liferay常用api总结
liferay之笑傲江湖学习笔记<一> 我们大家都知道,想要在一项技术上过硬,你需要付出汗水的,需要闭门修炼,每一个成功的人,都是那种耐得住寂寞的人,好了闲话少说.开始学习之旅 在life ...
- DIV CSS 绘制风车
我得说,CSS和DIV是个有趣的东西. 由于脑袋一无聊,突然想,画个DIV风车怎么样,于是就画了一个. border的风格可以自主选择. 上代码: <style> *{ margin:0p ...
- python解决matplotlib中文坐标值乱码的问题
加上这句话即可 plt.rcParams['font.sans-serif']=['SimHei'] 效果:
- 中国用户通过rchange用银联充值到PerfectMoney再给BTC-E充值进行搬砖的方法
最近迷上了比特币这个疯狂的东西,相信很多技术人员都感兴趣. 比特币.莱特币钱包下载和把数据迁移到C盘以外其他盘的方法. 莱特币和山寨币的原理跟比特币基本上一样,可以参考这个方法进行,莱特币的钱包数据迁 ...
- C++系统时间及字符串转换参考资料
https://msdn.microsoft.com/en-us/library/a442x3ye.aspx https://msdn.microsoft.com/en-us/library/fe06 ...
- Linux学习笔记之Centos7安装GNOME桌面环境
最小化安装Centos7,系统默认是命令行界面,如果像我一样有特殊需求,这时就需要我们手动来安装用户图形界面了. 1.查看一下当前的运行级别和可以安装的group. systemctl get-def ...
- SNMP学习笔记之SNMP报文以及不同版本(SNMPv1、v2c、v3)的区别
本篇文章将重点分析SNMP报文,并对不同版本(SNMPv1.v2c.v3)进行区别! 四.SNMP协议数据单元 在SNMP管理中,管理站(NMS)和代理(Agent)之间交换的管理信息构成了SNMP报 ...
- 阿里云实现简单的运行 Django 项目
首先申请一个阿里云账号,买一个阿里云服务器是必须的,对于一个学生来讲,按道理说,在不打折不搞活动的时候,价格还是蛮贵的,所以说,同志们,革命尚未成功,一定要挺住!!! 申请了阿里云,消费完毕,登录阿里 ...
- 03:requests与BeautifulSoup结合爬取网页数据应用
1.1 爬虫相关模块命令回顾 1.requests模块 1. pip install requests 2. response = requests.get('http://www.baidu.com ...