使用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. C#+Aspose.Cells 导出Excel及设置样式 (Webform/Winform)

    在项目中用到,特此记录下来,Aspose.Cells 不依赖机器装没有装EXCEL都可以导出,很方便.具体可以参考其他 http://www.aspose.com/docs/display/cells ...

  2. cxf的使用

    java的一个rest路径包含五个部分 1.容器路径,如tomcat的文件包名,jetty的context等 2.web.xml -配置cxf或者sevlet等 3.cxf.xml 4.具体的实现类中 ...

  3. Multinoulli distribution

    https://www.statlect.com/probability-distributions/multinoulli-distribution3 Multinoulli distributio ...

  4. hdu5145 莫队算法

    这题说的是个了n个数字 然后 在L 和R 区间内的数字的排列有多少种方案, 这里我们通过 将 这n长度的字符串 分成sqrt(n) 块然后 一个属性 他们的l 属于 那个快  以这个为第一关键字 ,然 ...

  5. uva10167

    /* 暴力 过了 要使得两半的 樱桃数目相等 去试每一个斜率 还好他这里要的是 A.B 都为正整数 这样范围就锁定在200*100 个点范围内 */ #include <cstdio> # ...

  6. input/radio/select等标签的值获取和赋值

    input/radio/select等标签的值获取和赋值,这几个是使用率最高的几个标签,获取值和赋值以及初始化自动填充数据和选择: 页面html: <div class=" " ...

  7. QQ在线客服,默认到要加好友,授权也不起作用需要先开通QQ营销服务

    QQ在线客服,默认到要加好友,授权也不起作用需要先开通QQ营销服务http://wpa.qq.com/msgrd?v=3&uin=你的客服QQ号码&site=qq&menu=y ...

  8. 基于webview的Hybrid app和React Native及html5

    基于webview的Hybrid app和React Native及html5 React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iO ...

  9. Bootstrap+AngularJS对话框实例

    <script type="text/javascript" src="/assets/JS/plugins/jquery.min.js">< ...

  10. appium自动化测试实战

    一.Appium的介绍   Appium是一款开源的自动化测试工具,其支持iOS和安卓平台上的原生的,基于移动浏览器的,混合的应用. 1. 使用appium进行自动化测试的好处 Appium在不同平台 ...