<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>testD3-.html</title>

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

</head>

<body>

<script type="text/javascript">

    var dataset = [ , , , ,  ];

    d3.select("body").selectAll("p")

        .data(dataset)

        .enter()

        .append("p")

        .text(function(d) {

            return "I can count up to " + d;

        })

        .style("color", function(d) {

            if (d > ) { //大于15的数字显示为红色

                return "red";

            } else {

                return "black";

            }

        });

</script>

</body>

</html>

.text(function(d){}),   在回调函数当中传入的数据分别对应数组当中的数据，

.style(), 同上，在回调函数当中传入对应的数据，根据数据返回字体的颜色

d3 使用数据的更多相关文章

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

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

  2. D3中数据与DOM element绑定之data() enter() exit()浅析

    几个非常有用的links: [1] three little circles. http://bost.ocks.org/mike/circles/ [2] How selection works.  ...

  3. [资料搜集狂]D3.js数据可视化开发库

    偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...

  4. d3.js:数据可视化利器之 交互行为：响应DOM事件

    selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...

  5. d3.js:数据可视化利器之 selection：选择集

    选择集/selection 选择集/selection是d3中的核心对象,用来封装一组从当前HTML文档中选中的元素: d3提供了两个方法用来创建selection对象: select(selecto ...

  6. D3——动态绑定数据

    一.绑定数组元素 , , , , ]; d3.select("body") .selectAll("p") .data(dataset) .enter() .a ...

  7. d3 根据数据绘制svg

    , , , , ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("cir ...

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

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

  9. d3.js:数据可视化利器之 修改文档：DOM操作符

    style: CSS样式操作符 style()操作符用来设置或获取选择集中各DOM元素的CSS样式: selection.style(name[,value[,priority]]) style()操 ...

随机推荐

  1. DB2中创建表

    CONNECT TO TEST; CREATE TABLE DB2ADMIN.PERSON ( ID BIGINT NOT NULL , NAME BIGINT , FLAG BIGINT , ADD ...

  2. Linux centos 6 配置php环境，扩展redis

    1.首先安装一个虚拟机(我自己版本:VM 10.0.4) yum -y install openssl psmisc openssl-devel php-devel pcre-devel gcc gc ...

  3. 01_1_Socket实现

    01_1_Socket实现 1.什么是MIME Multipurpos Internet Mail Extension 指明白传送内容的格式 最早用于邮件附件 2.HTTP协议基础 HTTP(Hype ...

  4. 洛谷 P1835 素数密度

    https://www.luogu.org/problemnew/show/P1835 对于40%,对每个数进行最大$O(\sqrt n)$的判断,因为n比较大所以超时. 想到线性筛,然而我们并不能筛 ...

  5. 06grep与find命令详解

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

  6. Struts2和Spring MVC 区别 今天面试被问到了

    虽然说没有系统的学习过Spring MVC框架, 但是工作这么长时间, 基本上在WEB层使用的都是Spring MVC, 自己觉得Struts2也是一个不错的WEB层框架, 这两种框架至今自己还未有比 ...

  7. 面试之mybatis和hibernate的区别

    mybatis是支持普通SQL查询.存储过程和高级映射的优秀持久层框架.封装了 几乎所有的JDBC代码和参数的手工设置 ,以及结果集的检索: 封装了:1,获取连接,执行sql,释放连接. 2,sql的 ...

  8. k短路模板

    https://acm.taifua.com/archives/jsk31445.html 链接: https://nanti.jisuanke.com/t/31445 #include <io ...

  9. 思维水题：UVa512-Spreadsheet Tracking

    Spreadsheet Tracking Data in spreadsheets are stored in cells, which are organized in rows (r) and c ...

  10. hiho 1050 树的直径

    #1050 : 树中的最长路 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到,小Ho得到了一棵二叉树玩具,这个玩具是由小球和木棍连接起来的,而在拆拼它的过程中, ...