D3.js学习笔记（二）——使用绑定在DOM上的数据

简单例子在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上.然后再使用D3.js利用绑定到DOM元素上的数据来更新网页. 在上一章中,我们以下面这个页面作为开始的: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.v3.min.js"></script> </head> <body>…

D3.js学习笔记（六）——SVG基础图形和D3.js

目标在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circle cx="25" cy="25" r="25" fill="purple&quo…

d3.js学习笔记（五）——将数据结构化为D3.js可处理的

目标在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优的结构化数据. 到目前我们已经学到了哪些? 到目前,我们使用D3.js完成的例子都包含一个定义在最上方的数据集: var spaceCircles = [30,70,110]; 这个spaceCircles变量是一个JavaScript数组.数组就是一个变量的枚举列表.这也就意味着,每一个元素都附有…

D3.js学习笔记（四）—— 使用SVG坐标空间

目标在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.js来对这些数据进行可视化: 数学/图形坐标空间(Mathematical/Graph Coordinate Space) 在我们使用D3.js基于一些数据把SVG元素添加到指定的坐标位置之前,我们先来讨论下坐标空间. 我们了解一些基础数学中的基础数学图形(mathematical graphs).…

D3.js学习笔记（一）——DOM上的数据绑定

开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文,来和大家分享 .当然,更推荐看英文原文教程了,点击这里. 简单例子在这个例子中,你将会使用D3.js来把数据绑定到简单网页的DOM元素(DOM element)上. 现在开始了!下面是一个简单的HTML网页: <!DOCTYPE html> <html> <head>…

D3.js学习笔记（三）——创建基于数据的SVG元素

目标在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始,然后去一步步理解它,从这一章开始,我们将会从零开始构建我们的数据可视化. 我们的目标是使用这个数据集: var circleRadii = [40,20,10]; 然后用D3.js来将这个数据集进行数据可视化. SVG的Circle元素首先我们要知道的是SVG的Circle元素是什么?它是怎么定义…

精通D3.js学习笔记（1）基础的函数

买了本吕大师的d3可视化.最近来学习一下,做个笔记. 1.选择元素 select(第一元素) 和selectAll(全部的元素) 类似css的选择器.也可以是dom选中的. var impotant = document.getElementById("important"); d3.select(important); getElementById 使用select getElementsByClassName 使用selectAll 2.选择集…

［转］node.js学习笔记(二)

二.express 1.安装 express4 npm --registry=http://registry.npmjs.org install -g express-generator (全局) 2.新建express项目 express -t ejs newsproject cd newsproject npm --registry=http://registry.npmjs.org install 3.启动项目 A 修改app.js增加其中,通过app.use('/',routes)访问…

【转】require.js学习笔记(二)

require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <script src="js/require.js" data-main="js/main"></script> MAIN.JS require.config({ baseUrl: "js/lib", paths: { "jquer…

精通D3.js学习笔记（2）比例尺和坐标

1.线性比例尺 d3.scale.linear() 创建一个线性比例尺 .domain([0,500]) 定义域 .range([0,1000]) 值域 linear(x) 输入定义域返回值域 linear.invert(y) 输入值域,返回定义域 linear.domain([numbers]) 设定或获取定义域 linear.range([values])设定或获取值域 linear.rangeRound([valuses]) 四舍五入,结果…

Node.js学习笔记(二) --- CommonJs和Nodejs 中自定义模块

一. 什么是 CommonJs? JavaScript 是一个强大面向对象语言,它有很多快速高效的解释器. 然而, JavaScript标准定义的 API 是为了构建基于浏览器的应用程序.并没有制定一个用于更广泛的应用程序的标准库. CommonJS 规范的提出,主要是为了弥补当前 JavaScript 没有标准的缺陷. 它的终极目标就是: 提供一个类似 Python, Ruby 和 Java 语言的标准库,而不只是停留在小脚本程序的阶段.用 CommonJS API 编写出的应用, 不仅可以利…

vue.js学习笔记(二)——vue-router详解

vue-router详解原文链接:www.jianshu.com 一.前言要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a>标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题 vue-router 二.vue-router是什么这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器.再通俗的说,vue-router就是WebApp的链接路径管…

vue.js学习笔记(二)：如何加载本地json文件

在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来.(此时项目是由webpack打包而成). 整个项目是由webpack打包而成.具体项目结构如下: 1:打包好的文件在此,http://pan.baidu.com/s/1c2EEeAG 2:我们找到bulid>dev-server.js,然后打开 3:在里面加入这…

angular.js学习笔记(二)

1.安装core ,shared模块 ng g m core ng g m shared 2.在shared中导入core模块 core模块只加载一次所以将公共组件放到core中 3.创建公共组件: ng g c core/header --spec=false 创建header组件,并且不使用测试 4.在core.moudles.ts中exports导出 @NgModule({ declarations: [HeaderComponent, FooterComponent, Sideb…

D3.js学习（二）

上一节中我们已经画出了一个基本的图表,不过忘了给坐标轴添加标签了,所以在本节中我们要给坐标轴加上标签,目标效果如下给X轴添加标签很明显,标签是不是一个text内容块啊,所以我们只要在svg中添加一个text然后再给这个text定位和指定内容不就行了么?先来看如何给x轴添加标签 //增加一个x轴的标签 svg.append("text") .attr("transform", "translate(" + (width/2) + ",…

JS学习笔记（五） HTML DOM

参考资料: 1. http://www.w3school.com.cn/js/js_htmldom.asp 2. http://www.runoob.com/htmldom/htmldom-tutorial.html ☂ 知识点: ☞ HTML DOM定义了访问和操作HTML和XML文档的标准方法. ☞ W3C DOM标准分3个不同的部分:1. 核心DOM - 针对任何结构化文档的标准模型. 2. XML DOM - 针对XML文档的标准模型. 3. HTML DOM - 针对HTML文档的…

03 Node.js学习笔记之根据http请求路径返回不同数据

在Nodejs中,当客户端请求的路径不同时,NodeJS处理返回不同的数据步骤: //1.载入http模块 var http=require('http'); //2.创建一个http服务 var server=http.createServer(); //3.监听request请求事件,设置request,response回调函数 server.on('request',function (request,response) { //这里指定编码,处理乱码的问题 response.write…

Lamda表达式学习笔记二

Lamda表达式学习笔记二 lamda表达式----方法引用上一篇讲到Lamda体就是对函数式接口方法的实现 ,在方法体中我们可能会引用其他方法实现逻辑,所以在lamda体中我们可以直接引用器方法 I 对象::实例方法名 /** * 对象::实例方法名 */ @Test public void test6() { Consumer<String> consumer = (x) -> System.out.println(x); consumer.accept("->&q…

纯JS实现KeyboardNav(学习笔记)二

纯JS实现KeyboardNav(学习笔记)二这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码预览地址最终效果 KeyboardNav使用指南: 左下角为网站的icon,'.'代表网站无icon或未设置网站按键盘上相应的按键进入对应网站鼠标放上去可编辑并保存网站,除了初始网站,用户编辑的网站存在本地cookies 清空cookies后保存在本地的网站将被清除,还原会初始状态 CSS样式…

【转】Backbone.js学习笔记（二）细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由…

js学习笔记：webpack基础入门（一）

之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者服务器一.安装webpack 你需要之前安装node.js $ npm install webpack -g 安装成功后,便可以使用webpack命令行了. ok,开始工作! 二.新建一个空目录,名字为myApp,文件如下 entry.js document.write("It works.&qu…

[JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队提出了两种完全相反的事件流. 冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面.…

Vue.js学习笔记（2）vue-router

vue中vue-router的使用:…

2019-4-29 js学习笔记

js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个number类型表示它不是一个 null类型其实也是一个object类型的指代的是空对象的引用 undefined类型表示一个变量没有被初始化 2:引用数据类型 object 如果想知道一个变量所属的数据类型可以用typeof操作符二:数组 1:数组的定义:类似…

一点感悟：《Node.js学习笔记》star数突破1000+

写作背景笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨,想要写点东西,谈谈这期间的收获.心路历程,以及如何学习Node.js. 心路历程笔者一直有做技术笔记的习惯,前几年零零散散的也写了不少Node.js的东西,只不过都存在evernote里.写着写着,觉得有必要系统地整理下,于是就有了这个项目. 粗略统计了下,总共提交了约60篇教程,以及将近300个范例脚本.…

angular.js学习笔记--概念总结

好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $rootScope 和 $scope: $rootScope是angular中最接近全局作用域的对象,是所有$scope对象的最上层! $scope对象就是一个普通的js对象,我们可以在其上随意修改和添加属性,并且其在angular中充当数据模型,它是所有属性都可以自动呗视图访问到,但是它并不负责数据的处理…

python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文实例代码

python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文实例代码 python的json.dumps方法默认会输出成这种格式"\u535a\u5ba2\u56ed",.要输出中文需要指定ensure_ascii参数为False,如下代码片段:json.dumps({'text':"中文"},ensure_ascii=False,indent=2) import json #导入json格式 if __name__ ==…

系列文章--Node.js学习笔记系列

Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学习笔记(四)--- 与MySQL交互(felixge/node-mysql) Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs Nodejs学习笔记(六)--- Node.js + Express 构建网站预备知识 Nodejs学习笔记(七)--- Node.js + Exp…

WebGL three.js学习笔记 6种类型的纹理介绍及应用

WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学中的纹理既包括通常意义上物体表面的纹理即使物体表面呈现凹凸不平的沟纹,同时也包括在物体的光滑表面上的彩色图案,所谓的纹理映射就是在物体的表面上绘制彩色的图案. 在three.js中使用纹理可以实现很多不同的效果,但是最基本的就是为网格体的每个像素指定颜色.等同于将一张纹理图片应用在一个几何体的材质上…

amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules

amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意例如(HISTORY.md Web 组件更新历史记录.) 二.Web 组件开发规范Rules 目录 Web 组件样式组织目录结构及说明 package.json README.md HISTORY.md src 目录开发脚手架调试预览 Web 组件基于 Amaze UI 基础库(CSS / JS)开发,在基础库已有样式.功能的基础上做更多扩…

【D3.js学习笔记（二）——使用绑定在DOM上的数据】的更多相关文章