鱼常游而忘飞

Ou Lanhui — Sun, 22 Jan 2012 12:18:34 +0000

爆竹声中一岁除，跃马腾龙展宏图。

跨越浏览器的d3.js图表显示

Ou Lanhui — Sun, 22 Jan 2012 12:07:45 +0000

最近一段时间对正在采用的图表组件不满意了。看过d3.js之后，别的图表显示确实很难入眼。问题的难度是d3.js采用的SVG技术导致它只能在几种浏览器里使用，在我们客户大量使用的IE，特别是IE6的客户里很难显示正常。SVG之于IE的问题要想解决有几个思路：
一个可以想像的方式是采用svgweb，不过在调试的时候发现IE在加载d3.js经常出非常小且2的问题。比如一个函数里使用了两次while(++i < j)之后，d3.js就不能正常载入，提示的错误居然是“缺少’)'”。
二一个是在后端生成图片，这样就不存在SVG格式的问题了。这个世界近两年来流行的node.js可以在后台执行javascript，这让人有柳暗花明的感觉。
第三个方式是我们后端生成svg文件，前端使用svgweb加载。

沿着第一个思路太耗费时间，不符合想快速解决问题的思路。所以第二、三个方法做了重点测试。
首先可以参照的方法是d3.js里自带的node-canvas例子us-counties。如果将这个图片通过http输出到客户端第二个方法的技术问题就解决了。
然后是@mattbaker提交的gist 1511770，这个例子通过node.js完成了svg文件的生成。加上svgweb，在IE里显示svg图表的问题也就完全不存在了。
@mattbaker提供的gist 1509145提供了直接通过http输出png图片的例子。
我们聊加改造，其实是去除了一些功能就可以得到如下代码：

var http = require('http'),
    url = require('url'),
    jsdom = require('jsdom'),
    child_proc = require('child_process'),
    w = 400,
    h = 400,
    scripts = ["file://"+__dirname+"/../d3.min.js",
               "file://"+__dirname+"/../d3.layout.min.js",
               "file://"+__dirname+"/pie.js"],
    htmlStub = '';

http.createServer(function (req, res) {
  var values = (url.parse(req.url, true).query['values'] || ".5,.5")
        .split(",")
        .map(function(v){return parseFloat(v)});
  // 去除生成图片的代码
  //convert.stdout.on('data', function (data) {
  //  res.write(data);
  //});
  //convert.on('exit', function(code) {
  //  res.end();
  //});

  jsdom.env({features:{QuerySelector:true}, html:htmlStub, scripts:scripts, done:function(errors, window) {
    var svgsrc = window.insertPie("#pie", w, h, values).innerHTML;
    //jsdom's domToHTML will lowercase element names
    svgsrc = svgsrc.replace(/radialgradient/g,'radialGradient');
    res.writeHead(200, {'Content-Type': 'image/svg+xml'});
    res.write(svgsrc);
    res.end();
  // 去除生成图片的代码
  //  convert.stdin.write(svgsrc);
  //  convert.stdin.end();
  }});
}).listen(8888, "0.0.0.0");

console.log('Pie SVG server running at http://127.0.0.1:8888/');
console.log('ex. http://127.0.0.1:8888/?values=.4,.3,.2,.1');

用node.js运行后，使用下面页面即可：



  

  

    
      

    
  

  
    Tests using the OBJECT syntax to embed an SVG file

    
       
    
    
      

    Test HTML H1

龙年将至，发文记之，期待腾飞。

倚天出笼记

Ou Lanhui — Sun, 22 Jan 2012 05:14:56 +0000

持利器，事半而功倍。所以IT界以发明各种轮子为主要乐事。若器成则功利倍，没有人可以拒绝。在开始打造我们开发的目标团队之时，虽然还是孤身一人，但对各种使用利器之法也是有所耳闻。那段时间赋闲在家，研究一些好玩的技术，算是为某些事做准备，也可以调整自己的心态，积累精神。

一、高可用的管理平台
版本管理什么的以前都比较习惯了。从CVS到SVN一路走来，就是在一个人编码的时候也在使用SVN。管理方面还对比过Trac和Redmine。虽然一直对Python的好感多于Ruby，但是经过比较之后还是觉得Redmine更好一些。就这样，其实在加入新公司之前，各种管理工具通过选择就已经确定了以redmine/Subversion为基础。这两种工具的结合有很多优点：
* Redmine的权限管理可以于Subversion集成。
* Subversion提交的内容与Redmine的问题可以有效地连接。
* Redmine还可以提供简单的BUG管理功能。
从某种意义上来说，我是“拒绝文档控”。一直以来想鼓吹的就是没有文档的软件开发、没有说明书的软件操作方式。但是计划还是要有的，对进度的控制也要在合理的范围内。Redmine正好提供了详细的管理能力。除了可以对项目提供计划和实施管理之外，它的问题条目还可以详细或者粗略地提供开发时间的一些细节。如果可以，使用它也可以生成项目的开发或者设计文档。

二、高可用的硬件
而且那段时间一直使用Ubuntu做为Desktop，两个显示器使用起来，调代码、测试输出效率非常高。以致于当时大致每天下午可以有一两个小时出去骑会自行车散心。所以团队组建初期就提了硬件的指标，这个配置现在看来水平也不算低。每台开发用的电脑都是4核心CPU/8G内存，显示器的概算是每个人都是双显。后来因为我们还要与其他部门一块办公，大致的双显比例是1/2强。原来的开发机都是台式机，在项目逐渐增多后后续的配置都是移动性较强的笔记本了。
我在与之前一些朋友的探讨过程中，他们不是十分理解为什么配置这么好。最多的质疑是这好的配置要多花钱，但是这个说法非常经不起推敲，以一台电脑三年的预算使用期来算，就算是花费6,000元来配置一台开发用机，一年的成本也只有2000，平均到每个月只有非常少的费用。而采用好工具对开发人员带来的，恐怕用这些钱是换不来的。比如：
* 心情的舒畅
* 工作效率的提高
* 对工作条件的满意程度
没经历过用烂机器开发过程的人永远也不能懂得执行编译似卡死的时候的那种感觉，特别是项目Deadline临近。

三、敏捷的开发框架
使用敏捷框架是必然会在突发的、时间有限的项目中被采用的。特别是新团队，原始积累不够丰富的团队。
我们常用的这两个CodeIgniter/Play框架基本上都是沿着这个思路来的。
选择CI是为了将来在虚拟主机上使用。选择Play则是由于客户要求使用Java。不过我们用ab和siege的测试结果PHP的还要好一些。

四、模板，一定要有的模板
对于我们来说模板程序员和美工最好的沟通工具。我们的美工甚至已经可以在程序员参与之前，就可以根据需要打造好用户的界面。以至于有个项目的甲方说这个系统你们是不是设计得太简单了？这么快就做好了？
模板系统在为我们以原型驱动的开发过程打造了一个良好的基础，客户可以更好的理解我们的想法，并给我们最真实的意见反馈。
CodeIgniter里采用Smarty模板、Play里采用了自带的Grails模板，虽然还有可以同时用于Java和PHP，甚至当我们使用了Python/Ruby都可以用得上的Mustache模板系统，但是指望一个模板系统在不同的语言下都完全保持一致是不可能的。特别是Play里那些@之类。

五、Flash，IE Killer
如果愿意享受，软件开发的乐趣非常多。但是注意有很多烦恼。我们目前最大的烦恼来自于IE6。当初我们在给客户展示图表的时候，一开始使用了HighCharts，一个基于JavaScript的图表系统，在展示单个图表的时候问题不大，但是多图表展示一度让我们怀疑系统出现了致命的问题。应该说在这个问题上Flash成为了我们开发时IE6的Killer。

六、有效的工具
有效的工具我们用过的真是很多，下面几个是常用的但不限于：
* Httpfox（Web调试）
* Notepad++（HTML开发的利器）
* Piwik（用来分析客户行为）
* Netbeans
* Eclipse

我们还在打造基于node.js和d3.js的图表系统。工具的便利，让我们开发时的倚天剑日趋成熟。
利器在手，快乐我有。