使用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. 在liferay中如何使用Ajax的请求

    1:首先在界面上写一个路径,这个路径就是要找后台中的哪一个操作比如:

  2. MySQL实现SQL Server排名函数

    最近在MySQL中遇到分组排序查询时,突然发现MySQL中没有row_number() over(partition by colname)这样的分组排序.并且由于MySQL中没有类似于SQL Ser ...

  3. Swift Optional

    拆包和解包的原因: 其实所谓的 nil 就是 Optional.None, 非 nil 就是Optional.Some, 然后会通过Some(T)包装(wrap)原始值,这也是为什么在使用 Optio ...

  4. Keepalived 安装

    Keepalived 安装安装环境 keepalived-1.2.18.tar.gz VM虚拟机redhat6.5-x64:192.168.1.201 Xshell4 部署方案 201部署 安装步骤  ...

  5. shell 命令总结

    删除0字节文件 find . -type f -size 0 -exec rm -rf {} \; find . type f -size 0 -delete 查看进程,按内存从大到小排列 ps -e ...

  6. Code Blocks+gtest环境配置

    本文仅介绍Code::Blocks+gtest环境配置,gtest具体使用方法请参考: 玩转Google开源C++单元测试框架Google Test系列(gtest)(总) http://www.cn ...

  7. HttpClient配置SSL绕过https证书

    https://blog.csdn.net/irokay/article/details/78801307 HttpClient简介 HTTP 协议可能是现在 Internet 上使用得最多.最重要的 ...

  8. bzoj1650 / P2855 [USACO06DEC]河跳房子River Hopscotch / P2678 (noip2015)跳石头

    P2855 [USACO06DEC]河跳房子River Hopscotch 二分+贪心 每次二分最小长度,蓝后检查需要去掉的石子数是否超过限制. #include<iostream> #i ...

  9. Hive-查询结果导入到 MySQL

    step1:add jar /home/chenweidong/lib/hive-contrib-2.1.1-cdh.0.0.jar;add jar /home/chenweidong/lib/mys ...

  10. 20144303石宇森《网络对抗》注入shellcode和Return-to-libc攻击

    20144303石宇森<网络对抗>PC平台逆向破解 实验1:shellcode注入 实验基础 1.Linux下有两种基本构造攻击buf的方法:retaddr+nop+shellcode,n ...