d3.js
csdn_huangyumin
一直努力下去,看命运还怎么肆虐我
展开
-
append("clipPath")
CSS3/SVG clip-path路径剪裁遮罩属性简介by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4501一、SVG属性和CSS3属性千丝万缕的关系CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow转载 2015-11-04 12:47:11 · 400 阅读 · 0 评论 -
shape-rendering: crispEdges
1 数轴简介与比例尺相似,D3 的数轴实际上也是由你来定义参数的函数。但与比例尺不同的是,调用数轴函数并不会返回值,而是会生成数轴相关的可见元素,包括轴线、标签和刻度。但要注意,数轴函数只适用于SVG 图形,因为它们生成的都是SVG 元素。同样,数轴是设计与定量比例尺(与序数比例尺相对)配合使用的。2 设定数轴使用d3.svg.axis() 可以转载 2015-11-04 11:38:17 · 3812 阅读 · 0 评论 -
D3.js SVGAxes(坐标轴)
D3的坐标轴组件会自动显示刻度的参考线。这可以让你只专注于数据的显示,而让坐标轴组件去帮你绘制坐标轴和标记刻度。 Axis D3的轴组件是为D3的quantitative, time 和 ordinal 标度所设计的。# d3.svg.axis()新建一个默认的坐标轴。# aixs(selection)轴线适用于se转载 2015-11-24 14:46:50 · 3522 阅读 · 0 评论 -
[D3.js] SVG-Axes(坐标轴)
D3的轴组件是为D3的quantitative, time 和 ordinal 标度所设计的。 # d3.svg.axis() 新建一个默认的坐标轴。 # aixs(selection) 轴线适用于selection 或 transition。选择器必须包含一个 svg 或者 g 元素。 例如: d3.sel转载 2015-10-27 19:34:31 · 727 阅读 · 0 评论 -
D3.js学习笔记(一)——DOM上的数据绑定
开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细。从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解。学习的时候,就顺便翻译成中文,来和大家分享 。当然,更推荐看英文原文教程了,点击这里。 简单例子在这个例子中,你将会使用D3.js来把数据绑定到简单网页的DOM元素(DOM element)上。现在开始了转载 2015-10-27 15:01:57 · 1616 阅读 · 0 评论 -
【 D3.js 入门系列 — 5 】 坐标轴
http://www.ourd3js.com/wordpress/?p=111坐标轴,是可视化图表中经常出现的一种图形,由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的,需要用其他的元素组合构成。D3 提供了坐标轴的组件,如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。1. 坐标轴由什么构成在 SVG 画布的转载 2015-10-27 18:23:18 · 579 阅读 · 0 评论 -
D3.js学习笔记(二)——使用绑定在DOM上的数据
http://www.sxt.cn/u/2839/blog/4322简单例子 在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上。然后再使用D3.js利用绑定到DOM元素上的数据来更新网页。 在上一章中,我们以下面这个页面作为开始的:12345678转载 2015-10-27 15:24:25 · 613 阅读 · 0 评论 -
【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
http://blog.csdn.net/lzhlzz/article/details/36869567 在前面几节中反复出现了如下代码:[javascript] view plaincopysvg.selectAll("rect") .data(dataset)转载 2015-10-27 15:16:07 · 332 阅读 · 0 评论 -
D3.js学习笔记(三)——创建基于数据的SVG元素
http://www.sxt.cn/u/2839/blog/4321目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中。这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据。 注意:不同于前几章,我们从一个完整的代码开始,然后去一步步理解它,从这一章开始,我们将会从零开始构建我们的数据可视化。 我们转载 2015-10-27 15:31:34 · 3144 阅读 · 0 评论 -
nice()
d3.scale.linear() 中还有一些方法,这里介绍两个:nice() ,改变函数的 domain ,能自动把 0.00000000000001 变为最接近它的 0 , 9.999999991 变为最接近它的 10 rangeRound() , 能自动把输出变为最接近它的整数。转载 2015-11-04 14:21:47 · 560 阅读 · 0 评论 -
【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
在入门系列的教程中,我们常用 d3.json() 函数来读取 json 格式的文件。json 格式很强大,但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格文件,因为简单易懂,容易编辑。Microsoft Excel 通常会保存为 xls 格式, OpenOffice Calc 通常会保存为 ods转载 2015-11-04 13:59:11 · 524 阅读 · 0 评论 -
d3.select
d3虽然是一个很强大的js库,但是作为初学者并且只是为了一个临时项目才用它的人来说,深入研究它并没有什么必要。我目前只是采用了它的比较强大的selection以及部分函数功能,实际上这部分功能利用DOM的方法也能做到,只是比较烦琐一些。但是d3也有一些不方便的地方,可能也是我学的比较深入的缘故,比方说我们都习惯用下面这个方法选中指定的标签d3.select("g#g123")转载 2015-11-04 11:21:46 · 3994 阅读 · 0 评论 -
d3.time.format中的时间格式
%a - abbreviated weekday name.%A - full weekday name.%b - abbreviated month name.%B - full month name.%c - date and time, as "%a %b %e %H:%M:%S %Y".%d - zero-padded day of the month as a decimal numbe转载 2015-11-04 12:59:53 · 574 阅读 · 0 评论 -
D3.js学习笔记七:多系列折线图与图例
http://www.daliane.com/d3_js_xue_xi_bi_ji_qi_duo_xi_lie_zhe_xian_tu_yu_tu_li/要解决的问题现在这个统计图还要解决几个问题:支持多个系列、为多系列加入图例。现在的数据是单条折线,如果有多条折线,那么需要为它指定不同的名称和颜色,为它们指定图例,指定图例以后,我们通过图例来控制折线的显示转载 2015-12-01 16:30:12 · 17942 阅读 · 0 评论