最近又把之前读的论文找出来重读，寄希望在反复阅读中能找到灵感，这个过程有点难过，就像刚刚接触一样东西，盲人摸象一样，好像知道它大概是个什么，又深觉不得要领。

而读论文又不像写代码，可以明确的知道写了多少行，做了什么效果。成果很难衡量，所以最近常常苦恼。

下面继续整理最近解决的问题，结构目录如下：

  • 1.在leaflet绘制的地图上，用D3添加元素
  • 2.JavaScript的Date对象，加上一段时间
  • 3.line chart的转折点的光滑处理
  • 4.D3坐标轴样式

1.在leaflet绘制的地图上，用D3添加元素

需求就是像下图这样，在渲染好的地图上使用svg绘制各个地铁站点以及线路的信息。

已有的数据是各个站点的经纬度坐标，问题就是怎样将这些坐标对应到地图上相应的点。

这里用到了leaflet的一个函数latLngToLayerPoint

这是一篇专门介绍latLngToLayerPoint使用的博客：
http://bl.ocks.org/d3noob/9267535

在使用这个函数的过程中，我遇到了一个问题，随着地图的缩小，原来相对精准的点偏移的越来越严重，最后飘到了海里去……

后来发现是理解上的错误，我原以为latLngToLayerPoint是在点原有坐标（31.xxx,121.xxx）的基础上做偏移，这样就需要在circle元素上设置cx, cy，然后再transform，像下面这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
stations
    .enter()
    .append('circle')
    .attr('class', function(d) {
        return d.id;
    })
    .attr('fill', "blue")
    .attr('cx', function(d) {
        return d.x;
    })// 注意这里设置了cx
    .attr('cy', function(d) {
        return d.y;
    })// 注意这里设置了cy
    .attr('r', 5);

这里补充说明一点，当circle元素的cx, cy未设置的时候，circle的圆心在页面的坐标原点上。

其实，latLngToLayerPoint是相对于页面的原点偏移的，即不需要设置cx, cy即可，所以我相当于在精确位置上，多加了cx, cy，当地图很大的时候，这个值微乎其微；而当地图缩到很小的时候，就严重偏移了。去掉上面代码中注释的两个attr就恢复正常了。

2.JavaScript的Date对象，加上一段时间

如题，我想在下面time上增加一小时

1
2
var time = new Date('2016 5 27 22:20:00 +0800');
console.log(time); //Fri May 27 2016 22:20:00 GMT+0800 (中国标准时间)

于是，我就想到了这样：

1
2
var time = new Date('2016 5 27 22:20:00 +0800');
console.log(time + 3600000); // Fri May 27 2016 22:20:00 GMT+0800 (中国标准时间)3600000

如你所见，它真的就在末尾加了3600000ms ，输出了这样一串 Fri May 27 2016 22:20:00 GMT+0800 (中国标准时间)3600000

搜了一下这个问题，解决办法如下：

1
2
3
var time = new Date('2016 5 27 22:20:00 +0800');
console.log(time.getTime() + 3600000); // 1464362400000
console.log(new Date(time.getTime() + 3600000)); // Fri May 27 2016 23:20:00 GMT+0800 (中国标准时间)

3.line chart的转折点的光滑处理

先看一下对比图


原生的图转折点很锋利，而D3中圆滑化处理也很方便，只需要加.interpolate(“basis”)，如下：

1
2
3
4
var line = d3.svg.line()
    .interpolate("basis") // <=== THERE IT IS!
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

Smoothing out the lines in d3.js这篇文章有更细致的说明

4.D3坐标轴样式

之前看到百度地图的出租车OD平台，很喜欢他的数据图。

刚巧在D3的官网上发现了一组坐标轴样式，其中一个可以实现上图的效果，更多样式见：
https://github.com/d3/d3/wiki/SVG-Axes

【参考资料】
How to add 30 minutes to a JavaScript Date object?