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. 超全面Java 面试题（2.1）

    这部分主要是开源JavaEE框架方面的内容,包括hibernate.MyBatis.spring.Spring MVC等,由于Struts2已经是明日黄花,在这里就不讨论Struts2的面试题,此外, ...

  2. Render渲染函数和JSX

    1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...

  3. 解决cocos2dx 打包lua环境搭建问题( ImportError: No module named Cheetah.Template)

    将c++ 封装成lua调用时,显示一下错误: PYTHON_BIN not defined, use current python. generating userconf.ini... Genera ...

  4. 类扩展Extension

    延展(Extension):在本类里声明私有方法. 1:延展定义的方法是在implemetation中. 2:声明的方法是私有方法. 3:延展中声明的方法可以不实现. #import "Ho ...

  5. 配置Xcode的Device Orientation、AppIcon、LaunchImage

    以下图片指出的 TARGETS→General 面板的信息. 下面我们讲讲根据 APP 需求配置我们的Xcode: 1.设置 Device Orientation,指定 APP 支持设备的方向 ,我们 ...

  6. Choose unique values for the 'webAppRootKey' context-param in your web.xml files! 错误的解决

    大意是Log4jConfigListener在获取webapp.root值时,被后一context的值替换掉了,所以要在各个项目的web.xml中配置不同的webAppRootKey值,随即在其中一个 ...

  7. nginx的url重写

    1.1 简介 url重写由ngx_http_rewrite_module模块提供,默认会安装,但该模块功能的实现需要pcre.URL重写技术不仅要求掌握几个指令的语法.熟悉简单的正则表达式,还需要尽量 ...

  8. PHP分页类代码

    今天为大家献上一段代码,这是一段php分页代码: <?php//创建分页类class Page {    private $_all_num;                           ...

  9. python基本数据类型和简单用法

    一.int 整形范围 How Big Is an int? In Python2, the size of an int was limited to 32 bits, which is enough ...

  10. （转）git常见错误

      error: src refspec master does not match any. 引起该错误的原因是,目录中没有文件,空目录是不能提交上去的 error: insufficient pe ...