<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[matiascx的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/matiascx</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; matiascx]]></copyright><item><title><![CDATA[深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421583</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421583</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:46 +0800</pubDate><description><![CDATA[本文翻译自blog:
https://www.sarasoueidan.com/blog/svg-coordinate-systems/
SVG元素不像其他HTML元素一样受css盒子模型所制约。这个特点导致transform和postioning svg元素显得有些神秘，并且初看起来不是那么浅显易懂。然而，一旦你理解了SVG坐标体系以及transformation是如何工作的，那么操作SVG会变]]></description><category></category></item><item><title><![CDATA[d3js path generator vs layouts]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421567</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421567</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:40 +0800</pubDate><description><![CDATA[我们知道d3的一般套路就是d3.selectAll('path.mypath').data(yourDataset).enter().append('path').attr('class','mypath').attr('d',thePathString)
而thePathString的获取，一般都是根据绑定的yourDataset来生成的。具体生成方式有：
1. 通过程序自己一节一节地拼凑起来p]]></description><category></category></item><item><title><![CDATA[d3js layout 深入理解]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421553</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421553</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:37 +0800</pubDate><description><![CDATA[D3 layouts help you create more advanced visualisations such as treemaps:
D3 layouts帮助您创造更加高级复杂的可视化图表，比如treemaps,packed circles,network graphs:

Layout is just a JavaScript function that takes your da]]></description><category></category></item><item><title><![CDATA[d3js enter/exit深入了解]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421544</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421544</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:35 +0800</pubDate><description><![CDATA[在 Data joins 章节我们演示了当data和dom element个数相同时的情况
 id="content">
  
  
  

给定下面的数据
var myData = [ 10, 40, 20 ];
当我们对div元素join上数据时
d3.select('#content')
  .selectAll('div')
  .data(myData);
myData 数据的个数和di]]></description><category></category></item><item><title><![CDATA[d3js data joins深入理解]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421531</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421531</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:32 +0800</pubDate><description><![CDATA[Data joins

给定一个数据数组和一个 D3 selection  我们就可以attach或者说是'join'数组中的每个数据到selection中的每个元素上。
这将使得我们的数据和可视化元素之间建立紧密的联系并实现可视化成为可能。
比如如果我们有以下SVG的circles:







和下面的data数组：

var scores = [
  {
    "name": "Andy]]></description><category></category></item><item><title><![CDATA[d3js selections深入理解]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421520</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421520</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:29 +0800</pubDate><description><![CDATA[D3 selections选择DOM元素以便可以对这些dom元素做相应的操作，比如：更改其style,修改其属性，执行data-join操作，或者插入、删除相应elements
比如，如果给定5个circles:
我们可以使用d3.selectAll来选中所有的circles，并且通过.style和.attr来修改其样式或者属性

d3.selectAll('circle')
  .style(']]></description><category></category></item><item><title><![CDATA[d3js scales深入理解]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421507</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421507</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:27 +0800</pubDate><description><![CDATA[比例尺函数是这样的javascript函数：

接收通常是数字，日期，类别等data输入并且：
返回一个代表可视化元素的值，比如坐标，颜色，长度或者半径等

比例尺通常用于变换(或者说映射）抽象的数据值到可视量化变量（比如位置，长度，颜色等）
比如，假设我们有以下数组数据：

[ 0, 2, 3, 5, 7.5, 9, 10 ]

我们可以这样创建一个比例尺函数：

var myScale = d]]></description><category></category></item><item><title><![CDATA[d3js shape深入理解]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421493</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421493</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:24 +0800</pubDate><description><![CDATA[本文将视图了解d3js提供的帮助我们创建矢量图形的helper函数，比如下面的:
http://d3indepth.com/shapes/
lines

curves

pie chart segments

symbols

 
SVG
首先我们来认识一下SVG(scalable vector graphics).要知道上面例子中的图形实际上都是由SVG的path元素构成的。每张图都有不同的pa]]></description><category></category></item><item><title><![CDATA[如何使用chrome devtool调试Mobile网页？]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421467</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421467</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:18 +0800</pubDate><description><![CDATA[凡是做过mobile网页web app开发的朋友一定对开发效率的底下会有吐槽。现在chrome dev tool改变了程序员们的苦比。
1. chrome://inspect/#devices
2. android手机中打开chrome android
3. usb连机
4. 在pc的chrome devtool中inspect即可!
https://www.html5rocks.com/en/t]]></description><category></category></item><item><title><![CDATA[为什么有时父元素无法包含子元素？]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421445</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421445</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:13 +0800</pubDate><description><![CDATA[在css布局中，有时会出现以下现象：父亲元素可能为0x0，而子元素实际上是有尺寸的。总结一下有以下几种场景会导致这种情况发生：


If the child uses position: relative; top: 200px and move away from the parent.


If the child does something similar using a negative]]></description><category></category></item><item><title><![CDATA[base64编码以及url safe base64是怎么工作的?]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421433</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421433</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:11 +0800</pubDate><description><![CDATA[原文转自 http://www.yanshiba.com/archives/638
 
1: 为什么需要base64?
ASCII码一共规定了128个字符的编码,这128个符号,范围在[0,127]之间.其中,[0,31],及127, 33个属于不可打印的控制字符.
在电子邮件传输信息时,有些邮件网关会把[0,31]这些控制字符给悄悄清除.还有的早期程序,收到[128,255]之间的国际字符时,甚]]></description><category></category></item><item><title><![CDATA[古老的CSS同高列问题]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421419</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421419</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:08 +0800</pubDate><description><![CDATA[今日在网页设计时，遇到了希望页面的几列同高需求的实现问题，搜罗了一下google,找到以下文章，感觉不错，翻译过来，同时作为学习加深印象。
https://css-tricks.com/fluid-width-equal-height-columns/
 相同高度的列布局在web design领域是个很常见的需求。如果所有列都使用相同的background,那么所谓同高列在这里就没有什么关系了，因]]></description><category></category></item><item><title><![CDATA[styling the SVG images]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421406</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421406</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:05 +0800</pubDate><description><![CDATA[SVG不像canvas，SVG的所有元素都是以DOM元素存在于文档中的，我们可以像给任何普通的dom元素添加css样式一样，可以对svg的元素做styling.不过SVG元素的css样式名称和普通html元素的css样式属性名称还是有所区别的。下面给出一个完整的列表供参考


CSS PropertyDescription

fill
Sets fill color of the shape.

]]></description><category></category></item><item><title><![CDATA[vuejs plus d3]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421395</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421395</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:03 +0800</pubDate><description><![CDATA[vuejs 是一个数据驱动视图的前端框架，一切皆可以作为可重用的组件加以使用。
d3则是数据可视化javascript库，如何将二者的长处相结合是一个挑战。
https://tyronetudehope.com/2016/12/13/composing-d3-visualizations-with-vuejs/


import * as d3 from 'd3';
const data = [9]]></description><category></category></item><item><title><![CDATA[SVG坐标系统和transformation彻底理解]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421384</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421384</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:36:00 +0800</pubDate><description><![CDATA[翻译自https://sarasoueidan.com/blog/svg-coordinate-systems/
SVG元素不像传统的HTML elements一样受制于css box model。这就使得position或者transform这些svg元素有些不是很直观.然而，一旦我们理解了SVG坐标体系和transformation是怎么工作的，那么操作svg就变得容易起来。本文试图解析SVG]]></description><category></category></item><item><title><![CDATA[html,css,javascript角色划分]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421370</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421370</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:35:57 +0800</pubDate><description><![CDATA[html负责文档的structure和content
css负责文档内容的长相
javascript负责定义和文档的interaction交互]]></description><category></category></item><item><title><![CDATA[何时需要做urlEncode,以及为什么要做]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421360</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421360</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:35:54 +0800</pubDate><description><![CDATA[在RFC1738中，对于URL可以使用的字符集做了如下规定：
“
只有0-9a-zA-Z的字母以及$-_.+!*'(),"这几个特殊字符
”
而在html4中扩展了所有的unicode character set能够在url中使用。
那么到底有哪些字符需要encoded呢？
1. ascii control characters
 原因是：他们不可打印，
 字符范围iso-8859-1的00-1F]]></description><category></category></item><item><title><![CDATA[微信公众号开发点滴]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421349</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421349</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:35:52 +0800</pubDate><description><![CDATA[什么是微信网页授权
任何从微信客户端发起对第三方网站访问时，如果希望实现微信第三方登陆，必须使用公众号网页授权这个接口来开发实现。
或者对于PC端的网站使用PC浏览器访问网站时，希望使用微信来作第三方登录，这时也可以说是微信网页授权的一个典型应用场景，但是此时需要用到的是微信开放平台。这种开放平台只适用于PC端网站出码，并且必须使用手机微信扫码实现登录，不适用于手机端的移动浏览器访问pc网站的场景]]></description><category></category></item><item><title><![CDATA[提问的智慧 程序员成长之路]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421342</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421342</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:35:49 +0800</pubDate><description><![CDATA[偶然间看到一篇关于提问的智慧，深有同感，记录下来共勉之。
http://www.catb.org/~esr/faqs/smart-questions.html
https://laravel-china.org/topics/2396/wisdom-of-asking-questions-chinese-version]]></description><category></category></item><item><title><![CDATA[xml php 解析]]></title><link>https://blog.youkuaiyun.com/matiascx/article/details/76421332</link><guid>https://blog.youkuaiyun.com/matiascx/article/details/76421332</guid><author>matiascx</author><pubDate>Mon, 31 Jul 2017 10:35:46 +0800</pubDate><description><![CDATA[JSON作为数据交换可以说已经成为了一种事实上的标准，但是前几年和它对应的xml虽然说用的越来越少，但是我感觉还是有他可以应用的地方。
json更偏重于程序员来使用和解读，而xml则更适合用户来使用和解读。因此，存在这样的场景：用户使用xml来构造数据，通过一定的转换工具
转成我们需要的数据格式，同时如果需要的话则可以转成对应的json.
在php中一种非常好用的xml解析模式: simpleXM]]></description><category></category></item></channel></rss>