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. CentOS7-samba文件共享服务

    简介: Samba,是在Unix上实现SMB(Server Message Block)的一个工具套件.而SMB通常是windows用来实现共享的,包括文件和打印机等.而Unix上装上SMB,则使得U ...

  2. [转载]matlab图像处理为什么要归一化和如何归一化

    matlab图像处理为什么要归一化和如何归一化,一.为什么归一化1.   基本上归一化思想是利用图像的不变矩寻找一组参数使其能够消除其他变换函数对图像变换的影响.也就是转换成唯一的标准形式以抵抗仿射变 ...

  3. [vijos]P1642 班长的任务

    背景 十八居士的毕业典礼(1) 描述 福州时代中学2009届十班同学毕业了,于是班长PRT开始筹办毕业晚会,但是由于条件有限,可能每个同学不能都去,但每个人都有一个权值,PRT希望来的同学们的权值总和 ...

  4. 如何用纯 CSS 创作一台拍立得照相机

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YjYgey 可交互视频 此视频是可 ...

  5. python有三元运算符吗

    所属网站分类: python基础 > 语法,变量,运算符 作者:goodbody 链接: http://www.pythonheidong.com/blog/article/12/ 来源:pyt ...

  6. GoF23种设计模式之行为型模式之状态模式

    一.概述         定义对象之间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 二.适用性 1.一个对象的行为取决于它的状态,并且它必须在运行时刻 ...

  7. 关于host，nslookup，dig 的安装

    host,nslookup,dig依赖bind包,所以先看一下系统有没有bind包 命令如下:rpm -qa |grep bind 如果没有或者版本太低请升级安装 命令是:yum install bi ...

  8. 给vagrant中的precise64升级VBoxGuestAdditions

    位置:/usr/share/virtualbox/VBoxGuestAdditions.iso 在host(ubuntu 12.04 64)中: 查看虚拟机的名字:jb@H38:~/vm/vagran ...

  9. jsp页面上传多个name值到后台

    平常利用表单提交的一般都是一个文本框对应一个name,而在后台都是利用request.getParameter(String name);这段代码返回的是一个String类型的参数:而当我们页面上有多 ...

  10. VR开发的烦恼——范围限制

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/52230865 作者:car ...