d3高级应用专题(一)：canvas与SVG之间的转换

来源：http://blog.csdn.net/yiifaa/article/details/52142320

在第4版中，d3新增了d3.path包，可用于将canvas绘制的路径转换为SVG的路径，提高了代码的可移植性，能适应更多应用场景，无论是发挥canvas的高性能特点，还是发挥SVG的高控制性，都能轻松适应。

      唯一可惜的是，canvas能向SVG转化的目前还只支持路径，所以在实际应用中，需要把路径的创建过程单独抽取出来，示例代码如下：

 var canvas = document.getElementById('canvas'),    //  获取页面里SVG元素    svgCtx = d3.select('#svgCanvas'),    //  创建canvas上下文    canvasCtx = canvas.getContext('2d');//  绘制路径，既能适应canvas有能适应svgfunction drawPath(context) {    context.moveTo(10, 10);    context.lineTo(110, 150);    context.lineTo(210, 10);    context.lineTo(310, 150);}//  用canvas绘制图形function drawInCanvas() {    //  调用路径绘制方法    drawPath(canvasCtx);    //  设置渲染方式    canvasCtx.lineWidth = 1;    canvasCtx.strokeStyle = 'blue';    canvasCtx.stroke()}//  用SVG绘制图形function drawInSvg() {    //  创建SVG路径绘制上下文    var canvas = d3.path();    //  调用路径绘制方法    drawPath(canvas);    svgCtx.append('path')            //  设置路径参数           .attr('d', canvas.toString())           //   设置渲染方式           .attr('stroke-width', '1px')           .attr('stroke', 'blue')           .attr('fill', 'none')}//  调用canvas绘制方法drawInCanvas();//  调用SVG绘制方法drawInSvg();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

      最后的效果图如下所示，可以看出，在绘图的质量上，无论是抗锯齿与清晰程度，canvas都具有更明显的优势。 

      d3首次添加了支持canvas的模块，目前功能还较为单薄，但我相信，d3对canvas的支持将会越来越多、越来越好。