d3.js 實現svg 縮放 平移 旋轉
阿新 • • 發佈：2019-01-26
使用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)');