d3-js
你蠢哭我咯
个人博客:www.adebibi.com
展开
-
D3.js学习-选择元素和绑定数据
学习笔记,方便使用。 d3.select() - 选择所有指定元素的第一个 d3.selectAll() - 选择指定元素的全部var body = d3.select("body"); //选择文档中的body元素 var p1 = body.select("p"); //选择body中的第一个p元素 var p = body.selectAll("p"); //选择body中转载 2017-08-07 10:29:21 · 787 阅读 · 0 评论 -
d3.js-选择、插入、删除元素
选择元素 假设在 body 中有三个段落元素:<p>Apple</p> <p>Pear</p> <p>Banana</p> 现在,要分别完成以下四种选择元素的任务。选择第一个 p 元素使用 select ,参数传入 p 即可,如此返回的是第一个 p 元素。var p1 = body.select("p"); p1.style("color","red"); 结果如下图,被选择的元素标记为红色。转载 2017-08-07 10:34:07 · 1756 阅读 · 0 评论 -
d3.js-做一个简单的图表
做一个简单的图表柱形图是一种最简单的可视化图标,主要有矩形、文字标签、坐标轴组成。本文为简单起见,只绘制矩形的部分,用以讲解如何使用 D3 在 SVG 画布中绘图。画布是什么前几课的处理对象都是 HTML 的文字,没有涉及图形的制作。要绘图,首要需要的是一块绘图的“画布”。HTML 5 提供两种强有力的“画布”:SVG 和 Canvas。SVG 是什么SVG,指可缩放矢量图形(Scalable Ve转载 2017-08-07 11:01:45 · 1223 阅读 · 0 评论 -
d3.js-比例尺使用
线性比例尺var dataset = [1.2, 2.3, 0.9, 1.5, 3.3]; var min = d3.min(dataset); var max = d3.max(dataset);var linear = d3.scaleLinear() .domain([min, max]) .range([0, 300]);linear(0.9); //返转载 2017-08-07 11:52:28 · 392 阅读 · 0 评论 -
d3.js-坐标轴
旧版本: var axis = d3.svg.axis() .scale(linear) //指定比例尺 .orient("bottom") //指定刻度的方向 .ticks(7); //指定刻度的数量 最新版: var axis = d3.axisBottom(linear) .ticks(7); //指定刻原创 2017-08-07 12:51:50 · 840 阅读 · 0 评论