<!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. Spring学习笔记之Spring概述

    概述   Spring是一个java应用最广的开源框架,它是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Deve ...

  2. linux更新git

    在CentOS中使用yum install git安装的git是1.7版本的,所以需要更新1.9以及更高版本的git. 安装方法如下: 1.安装依赖的包: yum -y install curl-de ...

  3. NOIP模拟赛 准考证号

    准考证号 128M 0.1s ticket.cpp escription 蒟蒻hzwer NOIP2014惨跪,他依稀记得他的准考证号是37,现在hzwer又将要面临一场比赛,他希望准考证号不出现37 ...

  4. SAP行列转换的一种方法

    一段经典的代码写在这里 TABLES spfli. DATA: lt_data TYPE STANDARD TABLE OF spfli, lwa_ref TYPE REF TO data, lt_f ...

  5. 如何用纯 CSS 和 D3 创作一只扭动的蠕虫

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

  6. thinkcmf5更新模板代码分析,解决模板配置json出错导致数据库保存的配置项内容丢失问题

    private function updateThemeFiles($theme, $suffix = 'html') { $dir = 'themes/' . $theme; $themeDir = ...

  7. PHP函数详解：call_user_func()使用方法

    call_user_func函数类似于一种特别的调用函数的方法,使用方法如下: <?php function nowamagic($a,$b) { echo $a; echo $b; } cal ...

  8. Python基础——赋值机制

    使用id()函数用于获取对象的内存地址. 使用is来判断是不是指向同一个内存. 把一个对象赋值给另一个对象,两个对象都指向同一个内存地址. test=1000 test1=test id(test) ...

  9. django知识分支_1

    django知识分支 1.Cookie工作流程: 浏览器向服务器发出请求,服务器接收到浏览器的请求进行处理,服务器设置一个cookie发送给浏览器,浏览器将cookie保存,当需要再次登录的时候,浏览 ...

  10. Java代码中的(解压7z加密版)

    maven:需要加上这个下载这两个包 <dependency> <groupId>net.sf.sevenzipjbinding</groupId> <art ...