使用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. 分页Bootstrap实现

    <%@ include file="/init.jsp" %> <script type="text/javascript" src=&quo ...

  2. Data Center Drama 欧拉回路的应用

    这题说的是给了n个点 和m条边, 这m条边是无向的,任务是将这些边变成有向的,并且添加最少的有向边使得这个图中每个点的入度为偶数, 出度为偶数. 我们可以考虑使用欧拉回路来解决这个问题,这样说,假如一 ...

  3. 隐马尔可夫模型(HMM)学习笔记一

    学习了李航的<统计学习方法>中隐马尔可夫模型(Hidden Markov Model, HMM),这里把自己对HMM的理解进行总结(大部分是书本原文,O(∩_∩)O哈哈~,主要是想利用py ...

  4. linux基础命令---du

    du 以块为单位,显示当前目录下,所有目录.文件.子目录的磁盘使用情况.总结每个文件的磁盘使用情况,对目录进行递归处理 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE. ...

  5. 更换 nodejs npm 镜像为 淘宝 镜像

    淘宝npm镜像官方介绍文档:https://npm.taobao.org/ ,使用命令在这个官方文档里查询. 安装工具cnpm: $ npm install -g cnpm --registry=ht ...

  6. 20145106 java 实验四

    这次的实验是Android开发实验基础.Android开发是一个很大的工程,但是这次只是一个小小的入门. 首先将SDK文件复制到-根目录下,之后将Android Studio复制到电脑里. 并指明SD ...

  7. 20145208 蔡野《网络对抗》shellcode注入&Return-to-libc攻击深入

    20145208 蔡野<网络对抗>shellcode注入&Return-to-libc攻击深入 Shellcode注入 shellcode的获取代码 我使用了许心远同学博客中的代码 ...

  8. hdu 2222 Keywords Search - Aho-Corasick自动机

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Submissio ...

  9. MAKEFILE 编程基础之一【转】

    本文转载自:http://www.himigame.com/gcc-makefile/766.html 概述: 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Wind ...

  10. Mac安装和卸载HomeBrew

    安装方法: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/ ...