<!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. extranuclear gene|non-Mendelian inheritance|uniparental inheritance|maternal inheritance

    5.8某些细胞器含有DNA 因为除细胞核内的染色体外,细胞质中的细胞器上也有遗传物质(这类遗传物质被称为核外基因(extranuclear gene),比如线粒体上的rRNA,这是因为细胞器基因组是独 ...

  2. java基础—this关键字

    一.this关键字

  3. lua拷贝二进制文件的方法

    使用lua拷贝二进制文件相比文本文件复杂一点,方法如下 function copyFunc(targetPath,sourcePath) local rf = io.open(sourcePath,& ...

  4. virtualvenv+django+uWSGI+nginx 部署

    原创博文 转载请注明出处! 1. virtualvenv 2. django 3. uWSGI 4. nginx 5. 踩坑记录 1. virtualvenv virtualvenv install ...

  5. C/C++字符串笔试知识点及实例

    一.C字符串与C++字符串的深入理解 对于C语言,需要区分C字符串和C字符数组.  C字符串:以字符NULL('\0')结尾的字符数组:  C字符数组:数组元素类型为字符类型. C字符串的的初始化:c ...

  6. 共享服务-FTP基础（一）

    介绍:文件传输协议FTP 两种模式:服务器角度 主动(PORT style):服务器主动连接 命令(控制):客户端:随机port --- 服务器:tcp21 数据:客户端:随机port ---服务 ...

  7. Vue 父子组件间的通信

    前言 在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法 父组件传值给子组件,这 ...

  8. python 数据结构与算法之排序(冒泡,选择,插入)

    目录 数据结构与算法之排序(冒泡,选择,插入) 为什么学习数据结构与算法: 数据结构与算法: 算法: 数据结构 冒泡排序法 选择排序法 插入排序法 数据结构与算法之排序(冒泡,选择,插入) 为什么学习 ...

  9. LeetCode（275）H-Index II

    题目 Follow up for H-Index: What if the citations array is sorted in ascending order? Could you optimi ...

  10. Ubuntu 15.04 安装配置 Qt + SQLite3

    序 最近需要在Ubuntu下使用Qt开发项目,选择简单小巧的SQLite数据库,现将安装配置以及简单操作记录如下,以便日后查阅. 安装Qt CMake和Qt Creator是Linux下开发C++程序 ...