d3 使用数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>testD3-3.html</title>
    <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script>
</head>
<body>
<script type="text/javascript">

    var dataset = [ 5, 10, 15, 20, 25 ];

    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) { //大于15的数字显示为红色
                return "red";
            } else {
                return "black";
            }
        });

</script>
</body>
</html>

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

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

时间: 2024-08-06 00:23:24

d3 使用数据的相关文章

前端编程提高之旅(八)----D3.js数据可视化data join解析

   D3.js作为一门轻型的可视化类库,非常便于将数据与web界面元素绑定,实现可视化.乐帝d3.js入门是大体看了一遍<d3js数据可视化实战>这本书,D3操作非常类似于jquery的使用,具体体现在两点: 选择器模块都采用CSS3标准 方法可以链式调用    有了jquery使用基础,相信再加上以上书籍的例子,调试很容易上手使用D3.js,乐帝目前认为D3.js与jquery区别在于:D3.js独有的数据结构概念及对SVG操作方便的实现.而深入理解D3原理,以上皮毛的理解就不够用了.  

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

hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,34,71]; 简单地思考一下,要完成这个任务有两个问题需要解决: 用什么可视元素来表现横向柱? 数据对应到可视元素的什么属性? 这个不算困难,我们使用HTML的DIV元素来实现,代码参见http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/:快速

《D3.js数据可视化实战手册》即将上市!

内容提要 如今这个互联网时代,人们每天都生产海量的数据,如果直接面对这些数据,可能让人无从下手.将数据可视化,用形象立体的形式将其展现,有利于分析其中的关联,攫取可能存在的商业机会.本书意图通过大量的示例和代码,向读者讲述如何利用D3.js来实现数据可视化.只要您了解Javascript,就能完全掌握本书的内容. 本书一共13章,从如何搭建D3.js的开发环境开始,逐步介绍D3中的各种操作,包括选集.数据的初步处理.数据映射.坐标轴组件.动画过渡效果.SVG相关介绍.绘制图表.安排布局.可视化交

【D3.js数据可视化实战】--(3)桑基图(sankey)的绘制

什么是桑基图 用D3绘制简单的Sankey图 添加文字 圆形节点 添加交互效果 注:本文未经作者允许严禁转载和演绎 1 什么是桑基图? 桑基图是流图 (flow diagram )的一种,用来描述能量,人口,经济等的流动情况.最早由爱尔兰人Matthew Henry Phineas Riall Sankey 提出.Sankey是一名船长也是工程师,1898年Sankey在土木工程师学会会报纪要的一篇关于蒸汽机能源效率的文章中首次推出了第一个能量流动图,后来被命名为Sankey图,中文音译为桑基图

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

偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d3js.org/ 中文资料:http://www.ourd3js.com/ C3.js是一个基于D3.js的图表库. https://github.com/masayuki0812/c3 http://c3js.org/ 附:

d3 根据数据绘制svg

var dataset = [ 5, 10, 15, 20, 25 ]; var circles = svg.selectAll("circle") .data(dataset) .enter() .append("circle"); circles.attr("cx", function(d, i) { return (i * 50) + 25; }) .attr("cy", h/2) .attr("r"

D3.js数据可视化(二)——绘制弦图(Chord Layout)

树图网可视化实验 1. 实验要求 要求通过树,或者图.网的可视化聚类,分析某个公司的邮件社交网络.根据要求设计可视化方案,并利用D3工具实现可视化效果. 2. 过程 2.1. 可视化方案的设计思路 2.1.1. 可视化要求 1) 可视化该邮件社交网络. 2) 该可视化中的每个Edge都对应着一个权重(Emails per month或者weight),要求将该权重属性映射到一个图形化的属性,比如,color,types of line,size or shapes. 3) 可视化方案中要体现每个

D3.js数据可视化(一)——绘制热图(heat map)

二维标量可视化 1. 实验名称 二维标量的可视化. 2. 实验目的 使用d3以及提供的NBA篮球上个赛季的数据(basketball statics.xlsx),绘制一个热图(heat map). 3. 技术基础 Web, HTML, DOM, CSS, JavaScript, SVG. 核心技术为D3 —— Data-Driven Documents(数据驱动的文档).数据来源于你,而文档就是基于Web的文档(或者网页),代表可以在浏览器中展现的一切,比如HTML,SVG.D3扮演的是一个驱动

D3——动态绑定数据

一.绑定数组元素 var dataset = [5, 10, 15, 20, 25 ]; d3.select("body") .selectAll("p") .data(dataset) .enter() .append("p") .text("New paragraph!"); d3.select("body"):选择body .selectAll("p"): 选择body中的所有p元