<!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. Cross-Entropy Loss 与Accuracy的数值关系（很重要，很好的博客）

    http://www.cnblogs.com/dengdan890730/p/6132937.html

  2. Java压缩字符串工具类

    StringCompressUtils.java package javax.utils; import java.io.ByteArrayInputStream; import java.io.By ...

  3. npm上发布包和删除已发布的npm包（https://www.npmjs.com/）

    1.npm上发布自己写的包 2.删除已经发布的包 npm unpublish --force //强制删除,这个是撤销24小时发布的包,有些包发布久了,这个方法不会再管用了. npx force-un ...

  4. Python -- 可迭代对象和迭代器

    5.9 可迭代对象 可迭代对象: str , list , tuple , set , dict , range 1.在Python中,但凡内部有__iter__方法的对象,都是可迭代对象 2.查看对 ...

  5. Java中的后台线程和join方法

    /*守护线程(后台线程):在一个进程中如果只剩下 了守护线程,那么守护线程也会死亡. 需求: 模拟QQ下载更新包. 一个线程默认都不是守护线程. */ public class Demo extend ...

  6. iOS开发－动画总结

    一.简介 IOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide.Core Animation是IOS和OS X平台上负责图形渲染与动画的基 ...

  7. UVa 12171 题解

    英文题面不怎么友好,大家还是自行通过紫书了解题面吧... 解题思路: 1. 面对500 ^ 3的数据范围,我们需要先用离散化解决掉爆空间的问题. 2. 由于我们要求的总体积包括内空部分的体积,我们可以 ...

  8. nodejs开发过程中遇到的一些插件记录

    1.chalk Github:https://github.com/chalk/chalk   终端样式定制插件,可自定义输出日志的样式. 1.semver   管网:https://semver.o ...

  9. 剑指Offer（书）：不用四则运算做加法

    题目:写一个函数,求两个整数之和,不得使用四则运算位运算. package com.gjjun.jzoffer; /** * 写一个函数,求两个整数之和,不得使用四则运算 * * @author gj ...

  10. PAT Basic 1080

    1080 MOOC期终成绩 对于在中国大学MOOC(http://www.icourse163.org/ )学习“数据结构”课程的学生,想要获得一张合格证书,必须首先获得不少于200分的在线编程作业分 ...