cxu123321的博客

d3.js直方图与坐标轴基础LSD_Monkey这里讲一下怎么样用d3.js，输入一个数据list，根据数据画一个带有坐标轴的简单直方图.以下是目标效果.a plot直方图部分引入d3.<script src="//d3js.org/d3.v4.min.js"></script>画矢量图需要画布，首先，创建新svg:<script>var width = 800; //定义宽度var height = 800; //定义.

d3事件(二):事件的触发与自定义事件原创蚁方阵 最后发布于2016-08-05 23:49:44 阅读数 5200 收藏展开在第4版中，d3新增了事件的触发函数dispatch，类似于jquery的trigger函数，用于触发dom元素的事件处理函数。并且，d3的选择集合还可以注册任意名称的事件与相关的事件处理函数，即自定义事件。假定页面中还存在文章”d3事件...

第六章 比例尺的使用比例尺是 D3 中很重要的一个概念，上一章里曾经提到过直接用数值的大小来代表像素不是一种好方法，本章正是要解决此问题。为什么需要比例尺上一章制作了一个柱形图，当时有一个数组：var dataset = [ 250 , 210 , 170 , 130 , 90 ];绘图时，直接使用 250 给矩形的宽度赋值，即矩形的宽度就是 250 个像素。此方式...

第七章 坐标轴坐标轴，是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的，需要用其他的元素组合构成。D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。坐标轴由什么构成在 SVG 画布的预定义元素里，有六种基本图形：矩形 圆形 椭圆 线段 折线 多边形另外，还有一种比较特殊，也...

第八章 完整的柱形图一个完整的柱形图包含三部分：矩形、文字、坐标轴。本章将对前几章的内容进行综合的运用，制作一个实用的柱形图，内容包括：选择集、数据绑定、比例尺、坐标轴等内容。添加 SVG 画布//画布大小var width = 400;var height = 400;//在 body 里添加一个 SVG 画布 var svg = d3.select("body...

第九章 让图表动起来D3 支持制作动态的图表。有时候，图表的变化需要缓慢的发生，以便于让用户看清楚变化的过程，也能给用户不小的友好感。什么是动态效果前面几章制作的图表是一蹴而就地出现，然后绘制完成后不再发生变化的，这是静态的图表。动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化的过程的。例如，有一个圆，圆心为 (100, 100)...