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. 如何下载js类库

    https://bower.io/  这个已经淘汰 https://learn.jquery.com/jquery-ui/environments/bower/ Web sites are made ...

  2. Spring中c3p0连接池的配置 及JdbcTemplate的使用 通过XML配置文件注入各种需要对象的操作 来完成数据库添加Add（）方法

    通过配置文件XML方法的配置 可以使用非常简练的Service类 UserService类代码如下: package com.swift; public class UserService { pri ...

  3. cocos2dx观察者模式EventListenerCustom的使用（代替NotificationCenter）

    在cocos2dx 3.x版本已经被弃用,改用EventDispatcher代替. 观察者模式是MVC模式的一种,一个model可以对应很多个观察者view,当model收到事件通知时,对应的view ...

  4. 如何挂载一个镜像文件(how to mount an image file)

    如何挂载一个镜像文件(how to mount an image file) 08/16/2012master 4 Comments 在使用KVM或Xen虚拟化的情况下,经常需要使用镜像文件(imag ...

  5. TypeError: Cannot read property 'tap' of undefined

    E:\vue-project\vue-element-admin-master>npm run build:prod vue-element-admin@3.8.1 build:prod E:\ ...

  6. Chunky Monkey-freecodecamp算法题目

    Chunky Monkey(猴子吃香蕉, 分割数组) 要求 把一个数组arr按照指定的数组大小size分割成若干个数组块. 思路 利用size值和while语句确定切割数组的次数(定义temp将siz ...

  7. B. Anatoly and Cockroaches

    B. Anatoly and Cockroaches time limit per test 1 second memory limit per test 256 megabytes input st ...

  8. SAP 常用业务数据表设计

    表的要求表中使用的字段请尽量参照各模块的SAP字段标准使用习惯:  例:"ZXSLRZX销售组织对应的利润中心"中的销售组织应该使用VKORG.利润中心应该使用PRCTR.根据表的 ...

  9. 06grep与find命令详解

    1. grep 命令 grep 命令用于在文本中执行关键词搜索,并显示匹配的结果,格式为"grep [选项][文件]". grep 命令的参数及其作用如下: -b 将可执行文件(b ...

  10. Linux基础学习-使用vsftpd服务传输文件

    使用vsftpd服务传输文件 1 安装vsftpd [root@qdlinux ~]# yum install vsftpd Loaded plugins: product-id, search-di ...