<!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. 毛毛虫组【Beta】Scrum Meeting 1

    第一天 日期:2019/6/23 前言 第一次会议: 时间:6月20日 地点:教9-C404机房 内容:此次会议主要确定组内成员具体分工,并对目标进行了初步的确定. 1.1 今日完成任务情况以及遇到的 ...

  2. VMware9虚拟机安装MAC OS X Mountain Lion 10.8.2详细图文教程

    VMware虚拟机安装Mac OS X Mountain Lion 10.8.2所需文件:1.Vmware 9.01版下载:点击进入2.Vmware 9.01版汉化文件:点击进入3.VMware Wo ...

  3. 如何将字符串@“ abc123.xyz789”倒置

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...

  4. VueJS坎坷之路111---_self.$scopedSlots.default is not a function

    VueJs + Element 话不多说,直接贴错: _self.$scopedSlots.default is not a function <el-table stripe border r ...

  5. 【主席树 启发式合并】bzoj3123: [Sdoi2013]森林

    小细节磕磕碰碰浪费了半个多小时的时间 Description Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M ...

  6. mysql命令行复制数据库

    为了方便快速复制一个数据库,可以用以下命令将db1数据库的数据以及表结构复制到newdb数据库创建新的数据库#mysql -u root -p123456 mysql>CREATE DATABA ...

  7. linux关于任务计划

    1.一次性任务计划:at 1)添加 在18:16时候重启服务器 at 18:16 >at init 6 >at ctrl+d2)查看 atq 1 Mon Aug 20 21:09:00 2 ...

  8. 【windows】win7 sp1 系统语言中英文切换

    注:Windows 7 Ultimate and Windows 7 Enterprise (旗舰版和企业版) 可以直接在控制面板/地区和语言中修改显示语言,其他系统不行 进入网站下载相关的MUI包安 ...

  9. python 列表加法"+"和"extend"的区别

    相同点 : "+"和"extend"都能将两个列表成员拼接到到一起 不同点 :   + : 生成的是一个新列表(id改变) extend : 是将一个列表的成员 ...

  10. Python语言程序设计之一--for循环中累加变量是否要清零

    最近学到了Pyhton中循环这一章.之前也断断续续学过,但都只是到了函数这一章就停下来了,写过的代码虽然保存了下来,但是当时的思路和总结都没有记录下来,很可惜.这次我开通了博客,就是要把这些珍贵的学习 ...