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)');