D3.js学习（七）

上一节中我们学会了如何旋转x轴标签以及自定义标签内容，在这一节中，我们将接触动画（transition）

首先，我们要在页面上添加一个按钮，当我们点击这个按钮时，调用我们的动画。所以，我们还需要在原来的基础上添加两个东西。

添加一个按钮

<div id="option">
<input name="updateButton"
    type="button"
    value="Update"
    onclick="updateData()"
/>
</div>

 

添加一个动画函数

function updateData() {
  //再次获取数据
  d3.tsv("../data/data-alt.tsv", function(error, data){
    data.forEach(function(d){
      d.date = parseDate(d.date);
      d.close = +d.close;
    });
 
    //设置数据的规模
    x.domain(d3.extent(data, function(d){ return d.date }));
    y.domain([0, d3.max(data, function(d){ return d.close })]);
 
    //选择我们想要应用变化的部分
    var svg = d3.select("body").transition();
 
    //变化
    svg.select(".line")
      .duration(750)
      .attr("d", valueline(data));
    svg.select(".x.axis")
      .duration(750)
      .call(xAxis);
    svg.select(".y.axis")
      .duration(750)
      .call(yAxis);
  });
}

在上面的代码中， 我们首先要获取一个组先的数据，所以，我们从新的数据文件（data-alt.tsv）中读取新的数据。然后，仿造前面绘制图表的方法来进行绘制，不同的是，这里加入一个新的方法-transition()。

transiton(int): 使图表从一个状态过渡到另一个状态。括号里面可以是一个整数，表示动画执行的时长，当然也可以是一个ease(type[, arguments…])方法，来表示丰富的运动。

目前的代码为：

  1 <!DOCTYPE html>
  2 <meta charset="utf-8">
  3 <style> /* set the CSS */
  4 
  5 body { font: 12px Arial;}
  6 
  7 path { 
  8     stroke: steelblue;
  9     stroke-width: 2;
 10     fill: none;
 11 }
 12 
 13 .axis path,
 14 .axis line {
 15     fill: none;
 16     stroke: grey;
 17     stroke-width: 1;
 18     shape-rendering: crispEdges;
 19 }
 20 
 21 </style>
 22 <body>
 23 
 24 <div id="option">
 25     <input name="updateButton" 
 26            type="button" 
 27            value="Update" 
 28            onclick="updateData()" />
 29 </div>
 30 
 31 <!-- load the d3.js library -->    
 32 <script type="text/javascript" src="d3/d3.v3.js"></script>
 33 
 34 <script>
 35 
 36 // Set the dimensions of the canvas / graph
 37 var margin = {top: 30, right: 20, bottom: 30, left: 50},
 38     width = 600 - margin.left - margin.right,
 39     height = 270 - margin.top - margin.bottom;
 40 
 41 // Parse the date / time
 42 var parseDate = d3.time.format("%d-%b-%y").parse;
 43 
 44 // Set the ranges
 45 var x = d3.time.scale().range([0, width]);
 46 var y = d3.scale.linear().range([height, 0]);
 47 
 48 // Define the axes
 49 var xAxis = d3.svg.axis().scale(x)
 50     .orient("bottom").ticks(5);
 51 
 52 var yAxis = d3.svg.axis().scale(y)
 53     .orient("left").ticks(5);
 54 
 55 // Define the line
 56 var    valueline = d3.svg.line()
 57     .x(function(d) { return x(d.date); })
 58     .y(function(d) { return y(d.close); });
 59     
 60 // Adds the svg canvas
 61 var    svg = d3.select("body")
 62     .append("svg")
 63         .attr("width", width + margin.left + margin.right)
 64         .attr("height", height + margin.top + margin.bottom)
 65     .append("g")
 66         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 67 
 68 // Get the initial data
 69 d3.tsv("data/data.tsv", function(error, data) {
 70     data.forEach(function(d) {
 71         d.date = parseDate(d.date);
 72         d.close = +d.close;
 73     });
 74 
 75     // Scale the range of the data
 76     x.domain(d3.extent(data, function(d) { return d.date; }));
 77     y.domain([0, d3.max(data, function(d) { return d.close; })]);
 78 
 79     // Add the valueline path.
 80     svg.append("path")
 81         .attr("class", "line")
 82         .attr("d", valueline(data));
 83 
 84     // Add the X Axis
 85     svg.append("g")
 86         .attr("class", "x axis")
 87         .attr("transform", "translate(0," + height + ")")
 88         .call(xAxis);
 89 
 90     // Add the Y Axis
 91     svg.append("g")
 92         .attr("class", "y axis")
 93         .call(yAxis);
 94         
 95 });
 96 
 97 // ** Update data section (Called from the onclick)
 98 function updateData() {
 99 
100     // Get the data again
101     d3.tsv("data/data-alt.tsv", function(error, data) {
102            data.forEach(function(d) {
103             d.date = parseDate(d.date);
104             d.close = +d.close;
105         });
106 
107         // Scale the range of the data again 
108         x.domain(d3.extent(data, function(d) { return d.date; }));
109         y.domain([0, d3.max(data, function(d) { return d.close; })]);
110 
111     // Select the section we want to apply our changes to
112     var svg = d3.select("body").transition();
113 
114     // Make the changes
115         svg.select(".line")   // change the line
116             .duration(750)
117             .attr("d", valueline(data));
118         svg.select(".x.axis") // change the x axis
119             .duration(750)
120             .call(xAxis);
121         svg.select(".y.axis") // change the y axis
122             .duration(750)
123             .call(yAxis);
124 
125     });
126 }
127 
128 </script>
129 </body>
View Code

 

 

 

下节我们将把图表中的曲线图变成散点图，以及添加提示框（Tooltips）效果。

你可能感兴趣的:(js)

  • npm 安装自定义组件的时候报错 Unsupported URL Type "workspace:": workspace:^如何解决 Paula-柒月拾 npm前端vue.jsnode.jsjavascript
    这个错误信息提示你在npm命令中使用了一个不支持的URL类型"workspace:".在npm中，"workspace:"前缀用于表示当前的工作空间中的某个软件包。通常，在使用npm命令安装软件包时，你需要提供软件包的名称或者软件包的发布地址(例如，npminstallexpress或者npminstallhttps://github.com/expressjs/express)。如果你在使用"w
  • phpexcel 读取数据
    http://extjs.org.cn/fatjames/archives/379require_once'/home/PHPExcel_1.8.0/PHPExcel/IOFactory.php';$reader=PHPExcel_IOFactory::createReader('Excel2007');//设置以Excel5格式(Excel97-2003工作簿)$PHPExcel=$reader
  • 运行go程序时出现的同包多文件不能调用的问题 wjhx golanggolang开发语言后端
    翻出一个以前的项目，使用go编写，运行在linux上，当前在win11上运行，vscode下launch.json配置如下：{//使用IntelliSense了解相关属性。//悬停以查看现有属性的描述。//欲了解更多信息，请访问:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"n
  • vue中css使用data中的变量 console.log( ) #vuevue.jscssjavascript
    封装一个ui组件，组件的样式一般是多种多样的我们可以通过组件传值的方式将ui属性传递给组件，但是我们属性是在js中可以拿到，vue3之前css是无法直接获取的(vue3中已经可以直接获取，可以去学习一下)通过vars那么在vue2中，我们要借助setProperty函数写一个简单的例子helloworldexportdefault{data(){return{color:'red'}},mount
  • 前端进阶之路-从传统前端到VUE-JS（第一期-VUE-JS环境配置）（Node-JS环境配置）（Node-JS/npm换源） 恰薯条的屑海鸥 前端vue.jsvue入门vuevue框架node.jsnodejs配置
    经过前面的传统前端开发学习后，我们接下来进行前端的VUE-JS框架学习（写这篇文章的时候VUE-JS最新版是VUE3，所以默认为VUE3即可）首先，我们要配置Node-JS环境，虽然我们还不学习Node-JS但是Node-JS可以快速配置我们的VUE-JS框架，所以本期内容主要以Node-JS环境配置为主Node-JS下载官网：https://nodejs.cn/en/downloadhttps:
  • vue界面增加自定义水印 js youyu-youyu javascriptvue.js前端
    vue整个界面增加自定义水印需求：领导想要增加自定义水印好不容易调完，还是想记录一下,在.vue界面编写exportdefault{mounted(){this.$nextTick(()=>{this.addWatermark()})},methods:{//关键：添加水印//动态添加水印addWatermark(){//这是登录的时候保存在硬盘里的数据constbidataLoginUserin
  • 在vue3中通过jspdf+html2canvas实现导出页面pdf功能 落晓星 pdfvue.js前端ruoyi
    一、安装依赖npminstallhtml2canvasjspdf二、创建Vue组件下载文件importhtml2canvasfrom'html2canvas';importjsPDFfrom'jspdf';constroute=useRoute();//当前idconstpolicyExplainId=ref(route.params.id);constloading=ref(false);//详
  • 【问题记录】npm create vue@latest报错 菜鸟级后端 问题记录npmvue.js前端
    1，错误日志npmerrorcodeEPERMnpmerrorsyscallmkdirnpmerrorpathD:\ProgramFiles\nodejs\node_cache\_cacachenpmerrorerrnoEPERMnpmerrorFetchError:Invalidresponsebodywhiletryingtofetchhttps://registry.npmjs.org/cr
  • 【NodeJs】【npm】npm安装electron报错 果壳~ npmelectron前端
    解决问题npm安装electron报错一般来说是镜像源的问题。electron的镜像源与一般的vue之类的镜像源地址不一样需要单独配置。npm读取的全局配置一般是在C:\Users\{用户}\.npmrc这个配置文件中。如果你找不到你的配置文件可以执行如下命令,#执行后会直接用txt打开你的配置文件进行修改保存即可npmconfigeditcache=D:\Develop\nodeJs\node_
  • [Vue warn]: Unknown custom element: ＜router-view＞ - did you register the component correctly?报错 自学也学好编程 Vuevue.jsjavascript前端
    [Vuewarn]:Unknowncustomelement:-didyouregisterthecomponentcorrectly?Forrecursivecomponents,makesuretoprovidethe“name”option.foundin—>atsrc/App.vue该报错有很大概率是VUE没有进行注册解决方法：可以先检查一下在router>index.js文件，如果缺少注
  • nodeJS使用阿里云免费SSL证书简例 啃火龙果的兔子 nodejs阿里云sslnode.js
    环境：Debian8，阿里云公共镜像。步骤：1.安装nodejs2.编辑app.js文件，内容如下：varhttps=require('https');varfs=require('fs');varoptions={key:fs.readFileSync('213949634960268.key'),cert:fs.readFileSync('213949634960268.pem')};vara
  • 鹅厂JS面试题——0.1+0.2=0.3吗? 孤舟蓑影 JavaScriptjavascript开发语言ecmascript前端学习
    首先公布答案:在JavaScript中，0.1+0.2≠0.3为什么？JavaScript中的数字使用IEEE754标准的双精度浮点数（64位）进行表示。这种表示方式在处理十进制小数时，不能精确地表示某些数字。比如0.1和0.2这样的十进制小数，在转换成二进制浮点数时会产生无限循环的小数，导致它们在内存中只能近似表示。0.1在二进制中表示为一个近似值：0.000110011001100110011
  • 关于docker的一些实践
    {"registry-mirrors":["https://docker.registry.cyou","https://docker-cf.registry.cyou","https://dockercf.jsdelivr.fyi","https://docker.jsdelivr.fyi","https://dockertest.jsdelivr.fyi","https://mirror.al
  • 【高频考点精讲】前端动画库对比：GSAP、Anime.js和Motion One选型 全栈老李技术面试 前端高频考点精讲前端javascripthtmlcss面试题reactvue
    前端动画库三剑客：GSAP、Anime.js和MotionOne选型指南‍作者：全栈老李更新时间：2025年5月‍适合人群：前端初学者、进阶开发者版权：本文由全栈老李原创，转载请注明出处。今天咱们聊聊前端动画库这个事儿。作为"全栈老李"，我在项目里用过不少动画库，踩过坑也尝过甜头。现在市面上动画库五花八门，但真正能打的就那几个。今天重点说说GSAP、Anime.js和MotionOne这三个，帮你
  • VSCode源码添加VSCode自定义插件 成遇 VScodevscodeide编辑器
    VSCode源码添加VSCode自定义插件创建VSCode插件编译VSCode源码添加VSCode插件源码至VSCode源码中`vscode\.vscode-test.js``vscode\.vscode\launch.json``vscode\build\gulpfile.extensions.js``vscode\build\azure-pipelines\darwin\product-bui
  • 2024年 工作日 周末 法定节假日 数据json 醉心吻月 json
    0工作日1周末2节假日[{"day":"2024-01-01","type":2},{"day":"2024-01-02","type":0},{"day":"2024-01-03","type":0},{"day":"2024-01-04","type":0},{"day":"2024-01-05","type":0},{"day":"2024-01-06","type":1},{"day":"
  • js将树结构的嵌套数据递归扁平化为数组对象list这种格式[{},{}] 每一天，每一步 antdesign-reactjavaScriptjavascriptlistwindows
    树结构数据：[{"key":"test1","title":"测试1","children":[{"key":"test1-1","title":"测试1-1","parentKey":"test1"},{"key":"test1-2","title":"测试1-2","parentKey":"test1"},{"key":"test1-3","title":"测试1-3","parentKey"
  • python 获取节假日 AI算法网奇 python宝典
    www.easybots.cn是不准的，不能用，比如20190913，不能判断节假日#-*-coding:utf-8-*-importjsonimporturllib.requestimporttimeimportdatetimedefa1(date_str):server_url="http://api.goseek.cn/Tools/holiday?date="#server_url="htt
  • Solidity学习 - ABI 应用二进制接口 本郡主是喵 #Solidity学习区块链Solidity
    文章目录一、ABI基础概念1.ABI与API的区别2.ABI的核心作用二、ABI接口描述1.编译后的产物2.ABIJSON格式示例3.ABIJSON关键字段说明三、ABI编码1.编码示例2.编码数据的组成3.Solidity中的编码函数四、ABI解码1.解码的基本概念2.事件日志的解码五、ABI编解码可视化工具一、ABI基础概念1.ABI与API的区别API（应用程序接口）：是两个软件之间进行通信
  • 【节假日】通过开放Api获取节假日数据并保存到json文件 Leslie_Lei #随笔jsonjava节日
    目录依赖节假日数据返回结果类工具类依赖com.fasterxml.jackson.corejackson-databindcom.google.code.gsongson2.8.6cn.hutoolhutool-all5.8.18org.projectlomboklombok节假日数据返回结果类HolidayResponseimportcom.fasterxml.jackson.annotatio
  • npm-check-updates【实用教程】ncu 极速升级项目中全部依赖 朝阳39 #node.jsnpm
    安装npminstall-gnpm-check-updates查看可升级的依赖ncu更新package.json中的版本号ncu-u安装新版依赖npmi
  • 使用UmiJS框架开发React 汇智知了堂 前端理论知识reactjava
    1、什么是Umi.js?umi，中文可发音为乌米，是一个可插拔的企业级react应用框架。你可以将它简单的理解为一个专注性能的类next.js前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。2、为什么使用Umi.js?我们做react开发的时候会不会遇到以下问题？：2.1项目做大的时候，开发调试的启动和热更新时间会变得很长。2.2大应用下，网站打开很慢，有没有办法
  • 通过Umijs从0到1搭建一个React项目 小林rr react.js前端前端框架
    有一阵时间没写react了，今天通过umi搭建一个demo项目复习一下react；umi是一个可扩展的企业级前端应用框架，在react市场中还是比较火的一个框架。Umi官方文档：Umi介绍(umijs.org)一、构建项目。1、安装包管理工具。官方推荐使用pnpm，我也一直在使用pnpm，如果没有请执行以下命令自行安装。npminstall-gpnpm2、构建项目。根据官方文档的说明，我们在已经创
  • Midscene.js介绍和使用 望华笙 测试工具ui前端
    Midscene.js介绍和使用由于课程任务的需要，本人去寻找了AI+软件测试的相关应用，发现了Midscene这一便利的UI自动化测试工具。本篇博客主要对Midscene作了介绍，也给出了本人在使用Midscene过程中遇到的问题及摸索到的解决方案。Midscene.js是一个开源的基于多模态大型语言模型的UI自动化测试工具，它是由字节的web-infra团队开发。它能够智能地“解析”用户界面并
  • Midscene.js 安装与配置指南 孙爽知Kody
    Midscene.js安装与配置指南midsceneLetAIbeyourbrowseroperator.项目地址:https://gitcode.com/gh_mirrors/mid/midscene1.项目基础介绍Midscene.js是一个开源项目，旨在通过AI驱动浏览器自动化操作。用户可以使用自然语言描述任务需求，Midscene.js将自动执行相应的浏览器操作，如数据提取、页面验证等。该
  • could not import google.golang.org/protobuf/proto ezreal_pan Go后端golang前端开发语言
    背景import("encoding/json""testing""google.golang.org/protobuf/proto")在测试中需要使用proto，但是，import这个包之后，一直报couldnotimportgoogle.golang.org/protobuf/proto这个错误，尝试了各种方法，依然没有解决这个问题。临时方案执行gomodvendor这个命令。项目的目录下多了
  • Java web%10 好学且牛逼的马 java前端AI编程
    %10新路线Javawebai笔记阶段时长内容Web前端基础2天HTML、CSS、JS、Vue3、AjaxWeb后端基础4天Maven、HTTP协议、SpringIOC、DI、MySQL、JDBC、MybatisWeb后端实战6天Tlias案例（基于案例讲解web开发的核心知识）Web后端进阶2天SpringAOP、SpringBoot原理、自定义Starter、Maven高级前端web实战4天V
  • VSCode更改程序编译之后生成文件的保存路径 一low永逸 安装IDEvscode
    目录目标过程如何生成json代码其他参考目标想把程序文件和生成文件分开来，生成在当前文件的out文件夹过程在保存代码的文件夹下面再建一个保存生成文件的文件夹，我生成了out文件夹打开.vscode文件夹下面settings.json文件（这个json文件可以自己生成或复制过来，不影响使用）在settings.json中加入以下代码，我主要使用C++语言，所以只改这个，不同系统的shell语法不一样
  • 数文件夹中jpg,json文件个数 叶子202422 Python学习记录jsonsql数据库
    #2025.6.14importosfolder_path=r"E:\shujuji\the_seconde_shujuji_select_taka_photo_in_2025_6_9\select_from_images\select_colors"#替换为你的文件夹路径jpg_count=0json_count=0forfilenameinos.listdir(folder_path):iff
  • ts学习笔记 瑾清在努力 学习笔记javascripttypescript
    1.介绍ts是js的超集，他融合了其他语言的优势，将js带到了一个新的高度js,es,ts的关系：ECMAScript是JavaScript的标准，TypeScript是JavaScript的超集2.为什么使用ts？1.发现问题js---运行后报错ts---运行之前可检查出错误（静态类型检查）2.非异常故障错别字，未调用函数，基本逻辑错误constuser={name:'小明'，age:26}us
  • Java实现的简单双向Map，支持重复Value superlxw1234 java双向map
    关键字：Java双向Map、DualHashBidiMap     有个需求，需要根据即时修改Map结构中的Value值，比如，将Map中所有value=V1的记录改成value=V2，key保持不变。   数据量比较大，遍历Map性能太差，这就需要根据Value先找到Key，然后去修改。   即：既要根据Key找Value，又要根据Value
  • PL/SQL触发器基础及例子 百合不是茶 oracle数据库触发器PL/SQL编程
      触发器的简介; 触发器的定义就是说某个条件成立的时候，触发器里面所定义的语句就会被自动的执行。因此触发器不需要人为的去调用，也不能调用。触发器和过程函数类似 过程函数必须要调用,   一个表中最多只能有12个触发器类型的,触发器和过程函数相似 触发器不需要调用直接执行, 触发时间：指明触发器何时执行，该值可取： before：表示在数据库动作之前触发
  • [时空与探索]穿越时空的一些问题 comsci 问题
          我们还没有进行过任何数学形式上的证明,仅仅是一个猜想.....       这个猜想就是; 任何有质量的物体(哪怕只有一微克)都不可能穿越时空,该物体强行穿越时空的时候,物体的质量会与时空粒子产生反应,物体会变成暗物质,也就是说,任何物体穿越时空会变成暗物质..(暗物质就我的理
  • easy ui datagrid上移下移一行 商人shang js上移下移easyuidatagrid
    /** * 向上移动一行 * * @param dg * @param row */ function moveupRow(dg, row) { var datagrid = $(dg); var index = datagrid.datagrid("getRowIndex", row); if (isFirstRow(dg, row)) {
  • Java反射 oloz 反射
    本人菜鸟，今天恰好有时间，写写博客，总结复习一下java反射方面的知识，欢迎大家探讨交流学习指教 首先看看java中的Class package demo; public class ClassTest { /*先了解java中的Class*/ public static void main(String[] args) { //任何一个类都
  • springMVC 使用JSR-303 Validation验证 杨白白 springmvc
    JSR-303是一个数据验证的规范，但是spring并没有对其进行实现，Hibernate Validator是实现了这一规范的，通过此这个实现来讲SpringMVC对JSR-303的支持。 JSR-303的校验是基于注解的，首先要把这些注解标记在需要验证的实体类的属性上或是其对应的get方法上。 登录需要验证类 public class Login { @NotEmpty
  • log4j 香水浓 log4j
    log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, HTML, DATABASE #log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, ROLLINGFILE, HTML #console log4j.appender.STDOUT=org.apache.log4j.ConsoleAppender log4
  • 使用ajax和history.pushState无刷新改变页面URL agevs jquery框架Ajaxhtml5chrome
    表现 如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。 是什么有这么强大的功能呢？ HTML5里引用了新的API，history.pushState和history.replaceState，就是通过
  • centos中文乱码 AILIKES centosOSssh
    一、CentOS系统访问 g.cn ，发现中文乱码。 于是用以前的方式：yum -y install fonts-chinese CentOS系统安装后，还是不能显示中文字体。我使用 gedit 编辑源码，其中文注释也为乱码。       后来，终于找到以下方法可以解决，需要两个中文支持的包： fonts-chinese-3.02-12.
  • 触发器 baalwolf 触发器
    触发器(trigger)：监视某种情况，并触发某种操作。 触发器创建语法四要素：1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/before) 4.触发事件(insert/update/delete) 语法： create trigger triggerName after/before 
  • JS正则表达式的i m g bijian1013 JavaScript正则表达式
            g:表示全局（global)模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止。         i:表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写。         m:表示
  • HTML5模式和Hashbang模式 bijian1013 JavaScriptAngularJSHashbang模式HTML5模式
            我们可以用$locationProvider来配置$location服务（可以采用注入的方式，就像AngularJS中其他所有东西一样）。这里provider的两个参数很有意思，介绍如下。 html5Mode         一个布尔值，标识$location服务是否运行在HTML5模式下。 ha
  • [Maven学习笔记六]Maven生命周期 bit1129 maven
    从mvn test的输出开始说起   当我们在user-core中执行mvn test时，执行的输出如下：   /software/devsoftware/jdk1.7.0_55/bin/java -Dmaven.home=/software/devsoftware/apache-maven-3.2.1 -Dclassworlds.conf=/software/devs
  • 【Hadoop七】基于Yarn的Hadoop Map Reduce容错 bit1129 hadoop
    运行于Yarn的Map Reduce作业，可能发生失败的点包括 Task Failure Application Master Failure Node Manager Failure Resource Manager Failure 1. Task Failure 任务执行过程中产生的异常和JVM的意外终止会汇报给Application Master。僵死的任务也会被A
  • 记一次数据推送的异常解决端口解决 ronin47 记一次数据推送的异常解决
    　　 需求：从db获取数据然后推送到B         程序开发完成，上jboss,刚开始报了很多错，逐一解决，可最后显示连接不到数据库。机房的同事说可以ping 通。 　　  自已画了个图，逐一排除，把linux 防火墙　和　setenforce　设置最低。 　　　service iptables stop
  • 巧用视错觉-UI更有趣 brotherlamp UIui视频ui教程ui自学ui资料
    我们每个人在生活中都曾感受过视错觉（optical illusion）的魅力。 视错觉现象是双眼跟我们开的一个玩笑，而我们往往还心甘情愿地接受我们看到的假象。其实不止如此，视觉错现象的背后还有一个重要的科学原理——格式塔原理。 格式塔原理解释了人们如何以视觉方式感觉物体，以及图像的结构，视角，大小等要素是如何影响我们的视觉的。 在下面这篇文章中，我们首先会简单介绍一下格式塔原理中的基本概念，
  • 线段树-poj1177-N个矩形求边长（离散化+扫描线） bylijinnan 数据结构算法线段树
    package com.ljn.base; import java.util.Arrays; import java.util.Comparator; import java.util.Set; import java.util.TreeSet; /** * POJ 1177 (线段树+离散化+扫描线)，题目链接为http://poj.org/problem?id=1177
  • HTTP协议详解 chicony http协议
    引言                                 
  • Scala设计模式 chenchao051 设计模式scala
    Scala设计模式                我的话： 在国外网站上看到一篇文章，里面详细描述了很多设计模式，并且用Java及Scala两种语言描述，清晰的让我们看到各种常规的设计模式，在Scala中是如何在语言特性层面直接支持的。基于文章很nice，我利用今天的空闲时间将其翻译，希望大家能一起学习，讨论。翻译
  • 安装mysql daizj mysql安装
    安装mysql   (1)删除linux上已经安装的mysql相关库信息。rpm  -e  xxxxxxx   --nodeps (强制删除)      执行命令rpm -qa |grep mysql 检查是否删除干净   (2)执行命令  rpm -i MySQL-server-5.5.31-2.el
  • HTTP状态码大全 dcj3sjt126com http状态码
    完整的 HTTP 1.1规范说明书来自于RFC 2616，你可以在http://www.talentdigger.cn/home/link.php?url=d3d3LnJmYy1lZGl0b3Iub3JnLw%3D%3D在线查阅。HTTP 1.1的状态码被标记为新特性，因为许多浏览器只支持 HTTP 1.0。你应只把状态码发送给支持 HTTP 1.1的客户端，支持协议版本可以通过调用request
  • asihttprequest上传图片 dcj3sjt126com ASIHTTPRequest
    NSURL *url =@"yourURL"; ASIFormDataRequest*currentRequest =[ASIFormDataRequest requestWithURL:url]; [currentRequest setPostFormat:ASIMultipartFormDataPostFormat];[currentRequest se
  • C语言中，关键字static的作用 e200702084 C++cC#
    在C语言中，关键字static有三个明显的作用： 1)在函数体，局部的static变量。生存期为程序的整个生命周期，（它存活多长时间）；作用域却在函数体内（它在什么地方能被访问（空间））。 一个被声明为静态的变量在这一函数被调用过程中维持其值不变。因为它分配在静态存储区，函数调用结束后并不释放单元，但是在其它的作用域的无法访问。当再次调用这个函数时，这个局部的静态变量还存活，而且用在它的访
  • win7/8使用curl geeksun win7
    1.  WIN7/8下要使用curl，需要下载curl-7.20.0-win64-ssl-sspi.zip和Win64OpenSSL_Light-1_0_2d.exe。 下载地址：  http://curl.haxx.se/download.html 请选择不带SSL的版本，否则还需要安装SSL的支持包   2.  可以给Windows增加c
  • Creating a Shared Repository; Users Sharing The Repository hongtoushizi git
    转载自：   http://www.gitguys.com/topics/creating-a-shared-repository-users-sharing-the-repository/ Commands discussed in this section: git init –bare git clone git remote git pull git p
  • Java实现字符串反转的8种或9种方法 Josh_Persistence 异或反转递归反转二分交换反转java字符串反转栈反转
    注：对于第7种使用异或的方式来实现字符串的反转，如果不太看得明白的，可以参照另一篇博客： http://josh-persistence.iteye.com/blog/2205768   /** * */ package com.wsheng.aggregator.algorithm.string; import java.util.Stack; /**
  • 代码实现任意容量倒水问题 home198979 PHP算法倒水
    形象化设计模式实战             HELLO!架构                     redis命令源码解析   倒水问题：有两个杯子，一个A升，一个B升，水有无限多，现要求利用这两杯子装C
  • Druid datasource zhb8015 druid
    推荐大家使用数据库连接池 DruidDataSource. http://code.alibabatech.com/wiki/display/Druid/DruidDataSource DruidDataSource经过阿里巴巴数百个应用一年多生产环境运行验证，稳定可靠。 它最重要的特点是：监控、扩展和性能。 下载和Maven配置看这里： http
  • 两种启动监听器ApplicationListener和ServletContextListener spjich javaspring框架
    引言:有时候需要在项目初始化的时候进行一系列工作，比如初始化一个线程池，初始化配置文件，初始化缓存等等，这时候就需要用到启动监听器，下面分别介绍一下两种常用的项目启动监听器   ServletContextListener  特点: 依赖于sevlet容器，需要配置web.xml 使用方法: public class StartListener implements
  • JavaScript Rounding Methods of the Math object 何不笑 JavaScriptMath
        The next group of methods has to do with rounding decimal values into integers. Three methods — Math.ceil(),  Math.floor(), and  Math.round() — handle rounding in differen
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他