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. python_93_面向对象实例2

    class Role: def __init__(self,name,role,weapon,life_value=100,money=15000): '构造函数:实例化时做一些类的初始化工作' se ...

  2. ovx openVirtex的阅读文档

    由于flowvisor只有4个版本, 最新更新都是2013年的, 跟底层ovs版本不跟进, 最近斯坦福post一个 ovx, 猜测是flowvisor的加强版, 所以看一下文档说明 文档详见http: ...

  3. 01_10_Struts2_2.1.6版本的中文问题

    01_10_Struts2_2.1.6版本的中文问题 1. 由于Struts2_2.1.6存在bug 正常情况下在struts.xml配置如下一行 <constant name="st ...

  4. 修改broadcom 4322无线网卡ID教程，不再显示第三方无线网卡

    本帖最后由 hellokingabc 于 2016-1-11 03:07 编辑 黑苹果已经基本完美,但是无线网卡总是出现问题,经常断网,经过搜索,原因在于无线网卡在OSX系统下显示为第三方无线网卡,只 ...

  5. cron job 里面，如何让脚本半分钟运行一次？

    cron job 里面,如何让脚本半分钟运行一次? cron本身实现不了.但可以借助于sleep命令实现. 解决方法: 两个脚本 一个正常,一个增加sleep 30 crontab设置同时启动 在有的 ...

  6. 我的offer之路（一）

    目录 1.职业规划. 2.刷题. 3.看书. <剑指offer> <数据结构算法与应用:C++语言描述 > <Effective C++> <C与指针> ...

  7. Docker 镜像&仓库 获取及推送镜像

    docker查看.删除镜像 docker镜像存储位置: /var/lib/docker 查看docker信息也可以查看保存位置 docker info 1.列出镜像 docker images -aa ...

  8. Linux网络配置指令

    版权声明:本文为博主原创文章,未经博主允许不得转载. 原文地址: https://www.cnblogs.com/poterliu/p/6686799.html 重启网卡service network ...

  9. Django之cookie、session

    会话跟踪技术 可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应. 一次会话过程中,我们应该注意的是什么呢? 那就是,一些操作要保证用户操作的是用户自己个人的数据.举个 ...

  10. dedecms 标签

    article文章页标签 文档工具:http://tools.dedecms.com/dedetag_maker/article.html {dede:field.title/} 文章标题 {dede ...