使用D3.js画一个SVG 的 圆 circle

可以使用如下代码创建:

<svg width="50" height="50">
<circle cx="25" cy="25" r="25" fill="purple" />
</svg>

D3.js来创建这些图形可以看做这一过程为两步:

  1. 创建SVG容器(SVG坐标空间)
  2. 画圆形
//创建一个SVG容器
var svgContainer = d3.select("body").append("svg")
.attr("width",200)
.attr("height",200); //画圆形
var circle = svgContainer.append("circle")
.attr("cx",30)
.attr("cy",30)
.attr("r",20);

转自:https://www.cnblogs.com/winleisure/p/3517998.html

SVG基础图形和D3.js的更多相关文章

  1. D3.js学习笔记(六)——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  2. SVG 基础图形

    SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse&g ...

  3. SVG基础图形与参数

    SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义WEB上使用的矢量图 SVG 使用 XML 格式定义图形 SVG 图像在缩放时其图形质量不 ...

  4. 【D3.V3.js系列教程】--(十五)SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  5. SVG.js 基础图形绘制整理(二)

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

  6. D3.js学习笔记(四)—— 使用SVG坐标空间

    目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...

  7. D3.js学习笔记(三)——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

  8. 使用D3.js构建实时图形

    首先你需要在计算机上安装Node和npm. 数据的可视化表示是传递复杂信息的最有效手段之一,D3.js提供了创建这些数据可视化的强大工具和灵活性. D3.js是一个JavaScript库,用于使用SV ...

  9. D3.js & Data Visualization & SVG

    D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} ...

随机推荐

  1. 移动端1px细线解决方案总结

    现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在 ...

  2. zw版【转发·台湾nvp系列Delphi例程】HALCON MaxImage2

    zw版[转发·台湾nvp系列Delphi例程]HALCON MaxImage2 procedure TForm1.Button1Click(Sender: TObject);var image0, i ...

  3. 排序-----插入排序(python版)

    直接插入排序的算法思路: (1) 设置监视哨r[0],将待插入纪录的值赋值给r[0]: (2) 设置开始查找的位置j: (3) 在数组中进行搜索,搜索中将第j个纪录后移,直至r[0].key≥r[j] ...

  4. Azkaban 简介

    本文简单介绍一下Azkaban及其特点.azkaban是一个开源的任务调度系统,用于负责任务的调度运行(如数据仓库调度),用以替代linux中的crontab. 一.Azkaban是什么? 1.1 A ...

  5. Ignite内存数据库与sql支持

    Ignite采用h2作为内存数据库,支持h2的一切sql语法.如果是本地缓存或者复制缓存,sql执行直接在本地h2数据库中执行,如果是分区缓存,ignite则会分解sql到多个h2数据库执行后再汇总. ...

  6. linux服务器---squid限制

    Squid连接限制 Squid可以有效的限制连接,指定哪些用户可以连接,指定哪些网站可以访问,这样就可以有效的利用服务器带宽. 1.限制指定网段不能连接.编辑配置文件”/etc/squid/squid ...

  7. 阿里云运维部署工具AppDeploy详细教程

    AppDeploy是一个通过SSH实现的命令行工具,可完成应用部署和远程运维管理.当前工具实现为两个版本:普通版(伪代码描述语言)和Python版.Python版使用Python语法规则,可实现您的各 ...

  8. Js基础知识2-对象、对象属性全解

    Object对象 Object对象包含如下属性和方法,也就意味着一切对象(函数也是对象)都包含如下方法. 每种方法和属性在不同的对象中有不同的作用,并不是每种对象都有使用每个方法的必要. 下面是Obj ...

  9. MATERIALIZED VIEW-物化视图

     Oracle的实体化视图提供了强大的功能,可以用在不同的环境中,实体化视图和表一样可以直接进行查询.实体化视图可以基于分区表,实体化视图本身也可以分区. 主要用于预先计算并保存表连接或聚集等耗时较多 ...

  10. python中递归调用

    递归一个通俗的解释就是,在函数中调用函数本身:伪代码如下: In [31]: def fun(): ....: fun() # 这个递归没有任何作用,只是为了说明什么是递归 递归(Recursion) ...