d3.js 实现svg 缩放 平移 旋转

使用d3.js的时候，可能会需要对生成svg对象进行平移，旋转，缩放等操作

可以使用矩阵变换来进行坐标系下的转化，但是矩阵运算相对复杂。d3提供了相应的svg变换接口。

包括：

translate() , scale() , rotate() , skewX() , and skewY()

一、translate()

平移操作

2个参数，第一个参数是向右平移的像素，第二个是向下平移的像素。

跟svg的坐标走向是一样的。

二 、scale()

缩放

参数是放大的倍数

三、rotate()

旋转，参数是旋转的度数（顺时针）

下面给出画出点线布局的具体d3代码

    // 数据    var coordinateset = [      { x :8265.07 , y: 14813.2 } ,{ x :27679.7 , y: -35.9653 } ,{ x :50374.9 , y: -35.9653 } ,{ x :39717.5 , y: -26830.5 } ,{ x :-16142.4 , y: -35.9653 } ,{ x :-16142.4 , y: -8090.26 } ,{ x :37074.9 , y: -26830.5 } ,{ x :-33544.5 , y: -35.9653 } ,{ x :46808.2 , y: -35.9653 } ,{ x :39687.6 , y: -6299.66 } ,{ x :-29210.6 , y: -35.9653 } ,{ x :53905 , y: -35.9653 } ,{ x :-20469.5 , y: -35.9653 } ,{ x :8265.07 , y: 5271.22 } ,{ x :47534.6 , y: -10179 } ,{ x :42605.4 , y: -23316.7 } ,{ x :-2805.6 , y: -13759.4 } ,{ x :-2805.6 , y: -11026.9 } ,{ x :-48445.9 , y: 30007.4 } ,{ x :-55117.1 , y: 14209 } ,{ x :8265.07 , y: 22592.5 } ,{ x :8265.07 , y: 18841.9 } ,{ x :-33544.5 , y: 5315.09 } ,{ x :8265.07 , y: 29568.7 } ,{ x :-33544.5 , y: 14209 } ,{ x :-16142.4 , y: -19955.1 } ,{ x :15227.5 , y: -35.9653 } ,{ x :8265.07 , y: 39236.7 } ,{ x :-2805.6 , y: -8370.48 } ,{ x :42605.4 , y: -12633 } ,{ x :31744.7 , y: -35.9653 } ,{ x :47534.6 , y: -12633 } ,{ x :14073.7 , y: 3079.04 } ,{ x :34590.2 , y: -26830.5 } ,{ x :8265.07 , y: 36078.7 } ,{ x :8265.07 , y: 42455.6 } ,{ x :8265.07 , y: 32870.9 } ,{ x :42605.4 , y: -18008.6 } ,{ x :8265.07 , y: 26148.6 } ,{ x :8265.07 , y: -35.9653 } ,{ x :-39127.2 , y: -35.9653 } ,{ x :53905 , y: 2980.53 } ,{ x :39687.6 , y: -35.9653 } ,{ x :23662.9 , y: -35.9653 } ,{ x :49815.7 , y: -23316.7 } ,{ x :-2805.6 , y: -35.9653 } ,{ x :-48445.9 , y: 27092.9 } ,{ x :-43558.9 , y: 14209 } ,{ x :39687.6 , y: -12633 } ,{ x :19606.8 , y: -35.9653 } ,{ x :-16142.4 , y: -16170.5 } ,{ x :-48445.9 , y: 38562.4 } ,{ x :49815.7 , y: -26197 } ,{ x :11127.1 , y: 42455.6 } ,{ x :-48445.9 , y: 20978.4 } ,{ x :-16142.4 , y: -12191.1 } ,{ x :-38561.5 , y: 14209 } ,{ x :-48445.9 , y: 35689.8 } ,{ x :2652.33 , y: -35.9653 } ,{ x :-33544.5 , y: 9826.69 } ,{ x :-48445.9 , y: 17697.4 } ,{ x :-24804.4 , y: -35.9653 } ,{ x :35889.2 , y: -35.9653 } ,{ x :35889.2 , y: 5686.45 } ,{ x :-48445.9 , y: 32841.5 } ,{ x :-9471.73 , y: -35.9653 } ,{ x :42605.4 , y: -26830.5 } ,{ x :-48445.9 , y: 14209 } ,{ x :-48445.9 , y: 24113.3 } ,{ x :-19036.1 , y: -19955.1 } ,{ x :14073.7 , y: 6130.39 } ,{ x :-2805.6 , y: -5414.12 } ,{ x :11545.2 , y: 6062.08 } ,{ x :10994.9 , y: 45904.9 } ,{ x :50207.7 , y: -12633 } ,{ x :57487.8 , y: 2908.98 } ,{ x :-16142.4 , y: -26116 } ,{ x :55772.1 , y: -23316.7 } ,{ x :42605.4 , y: -32924.7 } ,{ x :35889.2 , y: 11015.1 } ,{ x :-58367 , y: 11539.6 } ,{ x :-42006.3 , y: -3410.41 } ,{ x :782.51 , y: -11126.8 } ,{ x :-51359.1 , y: 41548.3 } ,{ x :-2805.6 , y: -2683.82 } ,{ x :15227.5 , y: 3079.04 } ,{ x :11545.2 , y: 3079.04 } ,{ x :-16142.4 , y: -4025.28 } ,{ x :-48445.9 , y: 41548.3 } ,{ x :52941.3 , y: -23316.7 } ,{ x :35889.2 , y: 2855.22 } ,{ x :35889.2 , y: 8399.93 } ,{ x :43240.8 , y: -35.9653 } ,{ x :-29210.6 , y: -2494.8 } ,{ x :-58367 , y: 14209 } ,{ x :8265.07 , y: 45904.9 } ,{ x :8265.07 , y: 10343.7 } ,{ x :-42006.3 , y: -35.9653 } ,{ x :-36298.2 , y: -35.9653 } ,{ x :44817.2 , y: -12633 } ,{ x :57487.8 , y: -35.9653 } ,{ x :-51840.7 , y: 14209 } ,{ x :-35453.1 , y: 5315.09 } ,{ x :42605.4 , y: -30042.1 } ,{ x :-16142.4 , y: -23245.1 } ,{ x :46170.1 , y: -23316.7 } ,{ x :782.51 , y: -8370.48 } ,{ x :-29210.6 , y: -5021.53 } ,{ x :-37744.2 , y: 5315.09 }    ];    edges = [       {source:44, target:105},{source:16, target:17},{source:31, target:99},{source:2, target:8},{source:57, target:64},{source:13, target:39},{source:38, target:20},{source:6, target:33},{source:28, target:71},{source:59, target:22},{source:9, target:48},{source:45, target:58},{source:23, target:38},{source:37, target:15},{source:60, target:67},{source:35, target:53},{source:11, target:2},{source:42, target:9},{source:67, target:47},{source:56, target:24},{source:66, target:3},{source:62, target:42},{source:26, target:39},{source:51, target:57},{source:25, target:69},{source:27, target:34},{source:1, target:30},{source:24, target:59},{source:26, target:49},{source:3, target:6},{source:66, target:15},{source:35, target:27},{source:55, target:50},{source:98, target:40},{source:21, target:0},{source:43, target:1},{source:61, target:12},{source:71, target:84},{source:10, target:7},{source:47, target:56},{source:4, target:65},{source:64, target:18},{source:41, target:11},{source:52, target:44},{source:65, target:45},{source:90, target:63},{source:96, target:0},{source:58, target:39},{source:14, target:31},{source:48, target:29},{source:50, target:25},{source:32, target:85},{source:68, target:54},{source:12, target:4},{source:34, target:36},{source:5, target:87},{source:30, target:62},{source:5, target:55},{source:10, target:61},{source:8, target:92},{source:32, target:70},{source:54, target:60},{source:29, target:37},{source:49, target:43},{source:36, target:23},{source:46, target:68},{source:28, target:17},{source:22, target:7},{source:20, target:21},{source:101, target:19},{source:18, target:46},{source:103, target:78},{source:29, target:99},{source:31, target:74},{source:42, target:92},{source:51, target:88},{source:45, target:84},{source:88, target:83},{source:86, target:32},{source:106, target:28},{source:26, target:85},{source:94, target:19},{source:11, target:100},{source:67, target:101},{source:44, target:89},{source:72, target:86},{source:91, target:79},{source:98, target:7},{source:10, target:93},{source:104, target:76},{source:97, target:40},{source:95, target:35},{source:62, target:90},{source:103, target:66},{source:108, target:102},{source:89, target:77},{source:15, target:105},{source:107, target:93},{source:4, target:87},{source:91, target:63},{source:100, target:75},{source:97, target:81},{source:96, target:13},{source:25, target:104},{source:94, target:80},{source:82, target:106},{source:22, target:102},{source:95, target:73}    ];    // 创建SVG容器    var svg = d3.select("body")                .append("svg")                .attr("width", 40000)                .attr("height", 40000);    // 创建圆    var circles = svg.selectAll("circle")        .data(coordinateset)        .enter()        .append("circle");    // 根据数据设置每个圆的属性    circles.attr("cx",                     function(d) {return d.x;}                )       .attr("cy",                 function(d) {return d.y;}            )       .attr("r", 200)       .attr("fill",'red');    var lines = svg.selectAll("line")                   .data(edges)                   .enter()                   .append("line");    lines.attr("x1",                    function(d) {return coordinateset[d.source].x}              )         .attr("y1",                    function(d) {return coordinateset[d.source].y}            )         .attr("x2",                    function(d) {return coordinateset[d.target].x}            )         .attr("y2",                    function(d) {return coordinateset[d.target].y}            )         .attr({stroke: 'blue',                'stroke-width': 40});    var texts = svg.selectAll("text")        .data(coordinateset)        .enter()        .append("text");    texts.attr("x",                    function(d) {return d.x}              )         .attr("y",                    function(d) {return d.y}              )         .attr("dx", 20)         .attr("dy", 80)         .style("fill", "black")         .text(                    "HH"              );//function(d,i) {return i}    lines.attr('transform','translate(80000,60000)');    circles.attr('transform','translate(80000,60000)');    texts.attr('transform','translate(80000,60000) scale(30)');    svg.attr('transform','scale(0.03)');