原创 d3.js——圖形縮放平移操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>縮放操作</title> </head> <body> <script src =
2020-06-14 09:50:45
原创 d3.js——餅狀圖的拖拽
常規定義： var width = 500, height = 500; var dataset = [30,10,43,55,13] var color = d3.scale.category10() var svg = d3
2020-06-14 09:50:45
原创 d3.js——關於力學圖d3.layout.force的參數
size() 用於設定力學圖的作用範圍，使用方法爲 force.size( [ x , y ] )，這個函數用於指定兩件事： 重力的重心位置爲 ( x/2 , y/2 )所有節點的初始位置限定爲 [ 0 , x ] 和 [ 0 ,
2020-02-24 11:19:00
11
原创 d3.js——繪製打包圖
打包圖其實就是通過d3.layout.pack()進行數據轉換後，然後畫圈圈咯~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title
2020-02-24 11:19:00
原创 d3.js——選擇集與數據的綁定
一、使用datum（）綁定數據 <body> <p>Fire</p> <p>Water</p> <p>Wind</p> <script>
2020-02-24 11:19:00
原创 d3.js——箭頭的繪製
首先我們要明白如何在svg中進行箭頭的繪製： 先寫一對<defs>，裏面再寫一對<marker>，其中marker的屬性意義爲： viewBox 座標系的區域 refX, refY 在 viewBox 內的基準點，繪製時此點在直線端點上
2020-02-24 11:19:00
3
原创 d3.js——partition函數的參數
一、node()：將根數據傳入後，得到的節點的數組，每個節點添加8個參數: parent - 父節點children - 子節點value - 表示節點的大小，由下面 value() 函數指定的值，父節點的值等於子節點值的和depth
2020-02-24 11:19:00
原创 d3.js——文本換行
常規設置： var width = 400, height = 400; var str = "雲中誰寄錦書來，雁字回時，月滿西樓"; var svg = d3.select("body").ap
2020-02-24 11:19:00
19
原创 SVG基本形狀繪製總結
線段：<line x1=" " y1=" " x2=" " y2=" " style=" "/> 矩形：<rect x=" " y=" " width=" " height=" " style=" "/> 圓角矩形：<rect x
2020-02-24 11:19:00
2
原创 d3.js——用力學圖表示人物關係
relation.json： { "nodes":[ { "name": "雲天河" , "image" : "SilenceImage/tianhe.jpg" }, { "name": "韓菱紗" , "im
2020-02-24 11:19:00
1
原创 d3.js——繪製動態中國地圖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>可拖動的地圖</title> </head> <style> .link
2020-02-24 11:19:00
原创 d3.js——圓形分區圖
var width = 600, height = 400, radius = Math.min(width, height) / 2 , color = d3.scale.category20(); var s
2020-02-24 11:19:00
原创 d3.js——選擇集與數據綁定模板應用
var dataset = [30,43,120,87,99,167,142] var width = 500, height = 500; var rectWidth = 30, rectStep= 35; var sv
2020-02-24 11:19:00
原创 d3.js——csv表格的讀取
一、在OpenOffice中編輯和保存csv文件 （1） 首先，打開 OpenOffice Calc 。就像 Microsoft Office 中有 Word、Excel、PowerPoint 一樣，OpenOffice 中編輯表示使用的
2020-02-24 11:19:00
原创 SVG——座標系統的變換整合
變換 描述 translate(x,y) 平移操作，若x或y沒指定，則爲0 scale(a,b)或scale（m） 縮放操作 rotate(angle)或rotate(angle,cx,cy) 繞原點（或指定點（cx,cy））旋轉 tra
2020-02-24 11:19:00