处理数组数据//array var array=[3,2,11,7,6,4,10,8,15]; 最小值最大值d3.min(array) d3.select("#min").text(d3.min(array)); d3.select("#max").text(d3.max(array)); 中值与均值d3.median/mean d3.select("#median").text(d3.median(array)); d3.select("#mean").text(d3.mean(array)); 范围与求和d3.extent/sum d3.select("#extent").text(d3.extent(array)); d3.select("#sum").text(d3.sum(array)); 排序 d3.select("#asc")....
目标 在这一章，你将会使用D3.js，基于我们的数据来把SVG元素添加到网页中。这一过程包括：把数据绑定到元素上，然后在使用这些元素来可视化我们的数据。 注意：不同于前几章，我们从一个完整的代码开始，然后去一步步理解它，从这一章开始，我们将会从零开始构建我们的数据可视化。 我们的目标是使用这个数据集：1var circleRadii = [40,20,10]; 然后用D3.js来将这个数据集进行数据可视化。 SVG的Circle元素 首先我...
坐标轴: 是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的，需要用其他的元素组合构成。D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。- 坐标轴的组成在 SVG 画布的预定义元素里，有六种基本图形：矩形圆形椭圆线段折线多边形另外，还有一种比较特殊，也是功能最强的元素：路径画布中的所有图形，都是由以上七种元素组成。显然，这里面没...
本人的个人博客为：www.ourd3js.com csdn博客为：blog.csdn.net/lzhlzz 转载请注明出处，谢谢。 地图的制作在 D3 中可以说是最重要的一环。因为在进行数据可视化时，很多情况都会和地图联系在一起，如中国各省的人口多少，GDP多少等，都可以和地图联系在一起。 D3 中制作地图所需要的文件问 JSON 文件。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。关于 JSON 的语法格式，可以在： http://www...
本人的个人博客为： www.ourd3js.com csdn博客为： blog.csdn.net/lzhlzz 转载请注明出处，谢谢。 Layout ，直译为“布局，安排”。但在 D3 中不是这个意思。 D3 中有很多 Layout 函数，它们不是为了在画面中布局什么，在 D3 中是对输入的数据进行转换，转换成比较容易进行可视化的数据。实际进行可视化时，需要其他的代码。我们可以简单地把 Layout 理解为“制作常见图形的函数”，比如饼状图等等。 D3 中一共...
入门好文：http://www.ourd3js.com/wordpress/?p=51d3.js和d3.min.js内容一样，后者是压缩过的，适合发行版本，前者适合开发人员。1.选择集(满足css选择符的要求)主要和数据绑定一起使用d3.select()d3.selectAll()var body = d3.select("body")2.数据绑定(实质就是在选择集的元素对象里面添加一个变量，并赋值)p.text(function(d,i)){return d+" "+i}update、enter（不够）、exit（多于）处理模板，在d3中较为常用3.画柱形图 1.比例...
本人的个人博客为： www.ourd3js.com csdn博客为： blog.csdn.net/lzhlzz 转载请注明出处，谢谢。 这一节介绍怎样进行对话的操作，如鼠标单击，鼠标滑过等。 对一个被选择的元素，加入对话操作，代码例如以下：.on("click", function(){} ) 函数能够是无名函数。也能够是自定义的函数。上面代码监听的是鼠标单击的事件。但鼠标在被选择对象上单击时，就会调用函数 function 。 经常使用的事件（event）有：...
这一节学习树状图的制作。树状图的制作和集群图完全相同，经过这两种 layout 转换后的数据也很相似。本人的个人博客为： www.ourd3js.com csdn博客为： blog.csdn.net/lzhlzz转载请注明出处，谢谢。 树状图（ Tree ）通常用于表示层级、上下级、包含与被包含关系。树状图的制作和 9.4节集群图的制作 的代码几乎完全一样。不错，你没看错，几乎完全一样。那么为什么要把这两种图分开，它们有什么不同呢？先来看看对于同一组数据，它...
首先做出一个动态的柱形图（这儿用的d3.js的版本是v3，用v4的话有些函数会发生变化）效果图：代码：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>histogramTransitionEvent</title><style>.axis path,.axis line{fill: none;stroke: black;shape-rendering: crispEdges;}.axis text {font-family: sans-serif;font-size: 11px;}.MyText {fill: white;text-anchor: middle;}</style> </head> <body> <scri...
矩阵树图（Treemap），也是层级布局的扩展，根据数据将区域划分为矩形的集合。矩形的大小和颜色，都是数据的反映。许多门户网站都能见到类似图1，将照片以不同大小的矩形排列的情形，这正是矩阵树图的应用。图1 http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/现以浙江、广西、江苏三省份2013年的GDP作为数据，以GDP大小作为节点的权重将其制作成矩阵树图。1. 数据新建一个citygdp.json文件，内容如...
<!DOCTYPE html><html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px"><head><title></title><meta charset="utf-8"><meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link rel="stylesheet" href="css/fonts/font-awesome.min.css"><link rel="styleshe...
此文章为原创文章，原文地址：https://www.cnblogs.com/eagle1098/p/12146688.html效果如上图所示。本项目使用主要d3.js v4制作，可以用来选择两年的时间范围，两端按钮切换年，在时间轴上标注可以选择的时间范围和关键时间点。时间数据可以在前端配置，也可以从后端请求。此程序相对比较简单，主要涉及d3的比例尺和拖动处理。1）d3的比例尺其实就是把一个范围的数据映射到另一个范围的数据上此处，我们使用线性比例尺：d3.scaleLi...
D3.js作为一个前端，说到可视化除了听过 D3.js 的大名，常见的可视化库还有?ECharts、Chart.js，这两个库功能也很强大，但是有一个共同特点是封装层次高，留给开发者可设计和控制的部分太少。和 EChart、Chart.js 等相比，D3.js**?的相对来说自由度会高很多，得益于 D3.js?**中的 SVG 画图对事件处理器的支持，D3.js?可将任意数据绑定到文档对象模型（DOM）上，也可以直接操作对象模型（DOM）完成 W3C DOM API 相关操作，对于想要展...
这个需求其实挺明确的，但是网上搜出来的教程都乱七八糟，觉得实在需要自己总结一下。 D3.js目前已经被广泛使用在数据可视化领域，随着大数据的持续发展，这个框架估计会在今后更加流行（据说其作者Mike Bostock开始全职开发了，之前是负责纽约时报数据可视化的工程师，他本人也从纽约搬家到了旧金山……）。按照这里的介绍：https://github.com/mbostock/d3/wiki/API-Reference，D3.js实际上有专门读取JSON数据的API，所以其实D3....
第一次测试成功的d3.js代码，需要在ie9及以上的浏览器打开。火狐和google也可以尝试。删除<textarea>部分标记。<textarea cols="20" rows="8" id="con"><!DOCTYPE html><html><head> <title></title></head><style type="text/css"> body{ height: 100%; } .chart rect { stroke: white; fill: steelblue; }</style><script src="http://d3js.org/d3.v3.min.js" ></script><body></body><scri...