var dataset = [ , , , ,  ];

var circles = svg.selectAll("circle")

                 .data(dataset)

                 .enter()

                 .append("circle");

circles.attr("cx", function(d, i) {

        return (i * ) + ;

    })

   .attr("cy", h/)

   .attr("r", function(d) {

        return d;

   });

根据dataset里面的数据设置svg circle的坐标以及半径

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>testD3--drawSVG.html</title>

    <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script>

<style type="text/css">

    </style>

</head>

<body>

<script type="text/javascript">

    // SVG尺寸

    var w = ;

    var h = ;

    // 数据

    var dataset = [ , , , ,  ];

    // 创建SVG容器

    var svg = d3.select("body")

                .append("svg")

                .attr("width", )

                .attr("height", );

    // 创建圆

    var circles = svg.selectAll("circle")

        .data(dataset)

        .enter()

        .append("circle");

    // 根据数据设置每个圆的属性

    circles.attr("cx", function(d, i) {

            return (i * ) + ;

        })

       .attr("cy", h/)

       .attr("r", function(d) {

            return d;

       });

</script>

</body>

</html>

d3 根据数据绘制svg的更多相关文章

  1. d3根据数据绘制不同的形状

    绘制力导向图的时候通常节点都是圆形,但也会遇到公司节点绘制成圆型,人绘制成方形的情况,那我们怎么依据数据绘制不同的形状. 你可能首先会想到,这很简单啊,是公司的时候append circle,是人的时 ...

  2. 使用d3.v3插件绘制出svg图

    众所周知,这个插件使用的svg技术,而IE8(包括IE8)之前的浏览器是不支持svg的 接下来看代码吧 从后台获取到带id和父id的目录数据[json格式] var module = requestU ...

  3. D3.js学习笔记（三）——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

  4. D3——绘制SVG图形-直方图

    1.创建SVG元素 var svg = d3.select("body").append("svg"); 2.为SVG元素设置属性 svg.attr() .at ...

  5. d3.js:数据可视化利器之快速入门

    hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,3 ...

  6. 绘制SVG内容到Canvas的HTML5应用

    SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术,两种绘制图形方式各有优缺点,但两者并非水火不容,尤其是SVG内容可直接绘制在Canvas上的功能,使得两者可以完美的融合在一起, ...

  7. 数据可视化-svg入门基础（二）

    接上一篇:数据可视化-svg入门基础(一),基础一主要是介绍了svg概念,元素样式设置等. svg是(scalable vector graphic)伸缩矢量图像. 一.目录 (1)图形元素 (2)文 ...

  8. FireFox下Canvas使用图像合成绘制SVG的Bug

    本文适合适合对canvas绘制.图形学.前端可视化感兴趣的读者阅读. 楔子 所有的事情都会有一个起因.最近产品上需要做一个这样的功能:给一些图形进行染色处理.想想这还不是顺手拈来的事情,早就研究过图形 ...

  9. [D3] 2. Basics of SVG

    1. svg should use 'fill' prop instead 'background-color'2. svg width & height no need 'px'3. att ...

随机推荐

  1. nfs-ganesha使用

    一 nfs-ganesha在centos7上安装 yum -y install centos-release-gluster yum install -y nfs-ganesha.x86_64yum ...

  2. python之生成器的初识

    1. 生成器的定义 生成器的本质就是迭代器.python社区生成器和迭代器是一种 2. 生成器和迭代器区别 迭代器: ​ 都是Python给你提供的已经写好的工具或者通过数据转化得来的 生成器: ​ ...

  3. PAT (Basic Level) Practise （中文）- 1013. 数素数 (20)

    http://www.patest.cn/contests/pat-b-practise/1013 令Pi表示第i个素数.现任给两个正整数M <= N <= 104,请输出PM到PN的所有 ...

  4. vc文件操作汇总—支持wince

    一.判断文件及文件夹是否存在 // 判断文件是否存在 BOOL IsFileExist(const CString& csFile) { DWORD dwAttrib = GetFileAtt ...

  5. 浅谈一类「AC自动机计数」问题

    最近写了几道AC自动机的题.这几题主要考察的是对AC自动机的浅层理解套上计数. 几道计数题 [AC自动机]bzoj3172: [Tjoi2013]单词 把被动贡献看成主动贡献. [状态压缩dp]119 ...

  6. 201621123080《JAVA程序设计》第八周学习总结

    作业08-集合 1. 本周学习总结 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 根据代码,首先在源数组里找到下标,若下标符合>=0 ...

  7. python处理excel总结

    工作中,大家经常会使用excel去处理数据以及展示,但是对于部分工作我们可以借助程序帮忙实现,达到高效解决问题的效果,比如将接口返回的json解析并保存结果到excel中,按一定规律处理excel中的 ...

  8. Ubuntu安装sogou拼音输入法

    1.更新系统:sudo apt-get update 2.更新相关依赖 sudo apt-get install fcitx -f 2.安装fcitx:sudo apt-get install fci ...

  9. JAVA基础篇—异常

    五种常见异常 1.NullPointerException 空指针 2.ClassNotFoundException 指定类不存在 3.ArithmeticException运算异常 4.ArrayI ...

  10. LeetCode（220） Contains Duplicate III

    题目 Given an array of integers, find out whether there are two distinct indices i and j in the array ...