使用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. Integer类之equals与hashCode

    一.源码. 1.equals源码.可以看出,比较的是两者的类型相同且内容相同.即是否有相等的int类型的value值. ######################################## ...

  2. 2:1 Strus2架构

    一: 二: 表示:当以/login或者login.do表示的请求过来,就使用class指定的LoginAction类来处理,处理完了返回一个结果字符串,若果结果字符串是"fail" ...

  3. ping和telnet的区别

    内容主要转自: http://jingyan.baidu.com/article/8065f87fc3b31123312498e5.html http://zhidao.baidu.com/link? ...

  4. Linux基础命令---eject

    eject eject指令允许在软件控制下弹出可移动媒体(通常是光盘.软盘.磁带或Jaz或ZIP磁盘).该命令还可以控制一些由某些设备支持的自动弹出功能的多光盘转换器,并关闭一些光盘驱动器的盘. 对应 ...

  5. POI Excel文件的读取与写入

    1. 创建目录 if(!(new File(path).isDirectory())){ new File(path).mkdirs();} 2. 读取Excel文件,并进行写入操作 Workbook ...

  6. python之路----进程三

    IPC--PIPE管道 #创建管道的类: Pipe([duplex]):在进程之间创建一条管道,并返回元组(conn1,conn2),其中conn1,conn2表示管道两端的连接对象,强调一点:必须在 ...

  7. WebService(JAX-WS、XFire、Axis三种)获取客户端ip

    WebService(JAX-WS.XFire.Axis三种)获取客户端ip JAX-WS.XFire.Axis三种webservice的获取客户端IP的简单实现过程: 1,基于JDK6 jax-ws ...

  8. HTML 和 JavaScript 编写简单的 404 界面

    编写简单的 404 界面,也可以用来做 500 报错界面,还会飘东西,特别好,蛮漂亮的! <!DOCTYPE html> <html> <head> <met ...

  9. C 运算优先级口诀

    运算优先级口诀: 括号成员第一;        //括号运算符[]() 成员运算符.  ->  全体单目第二;        //所有的单目运算符比如!.~.++. --. +(正). -(负) ...

  10. Eclipse的快捷键使用总结

    最近一直在使用Idea开发项目,导致之前一直使用的Eclipse快捷键忘记的差不多了,现在稍微整理了一些,方便以后可以快速切换回来. 常用的Eclipse快捷键总结: Ctrl+S 保存当前正在编辑的 ...