使用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# 如何把dataTable以参数的形式传入 sql 存储过程

    ==================================================-- sql代码 示例:CREATE TYPE dbo.Content AS TABLE( ID i ...

  2. 4:7 Struts实现Ajax

    不使用插件: 返回数据: 使用插件: Action里面直接给User赋值,然后在前台拿值. type="json":表示返回json对象: root:表示作为跟对象 include ...

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

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

  4. 复制控件出错--提示XX控件不存在

    有时候比较喜欢复制粘贴,但是结果就是,经常出现XX控件找不到,或者不存在之类的话~~ 错误如下: 在相当郁闷的时候,尝试了一种很土土的方法,就是直接新建一个同名新页面,把前台和后台的代码复制进去~~ ...

  5. 程序猿职场心理学,教你三进三出“斩”HR拿offer(跳槽必看)

    摘要: 今天主要涉及到的是 HR 在面试时有哪些套路,这样可以见招拆招,斩获 offer! 今天主要涉及到的是 HR 在面试时有哪些套路,这样可以见招拆招,斩获 offer! 主要包括以下内容: 一. ...

  6. 计算概论(A)/基础编程练习1(8题)/6:判断闰年

    #include<stdio.h> int isLeap(int year) { // 必须先判断是平年的情况 后判断闰年的情况 == && year%!=) || yea ...

  7. 20145101《Java程序设计》第二周学习总结

    20145101 <Java程序设计>第2周学习总结 教材学习内容总结 在第三章的学习中,我学到了很多新知识点,了解到Java语言中的类型及其变量主要类型为:整数,还有char型,bool ...

  8. Delphi XE5 for Android (一)

    Delphi XE5 出来了,支持Android的开发,试用了一下,有几个问题: 1.只支持ARM7的设备,不支持Inter设备.手上刚好有一个华硕K004,很遗憾用不上,只能用手机试了. 2.要支持 ...

  9. bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.

    affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...

  10. 51nod 1137 矩阵乘法

    基本的矩阵乘法 中间for(int j=0;i<n;i++)  //这里写错了   应该是j<n 晚上果然  效率不行 等会早点儿睡 //矩阵乘法 就是 两个矩阵 第一个矩阵的列 等与 第 ...