D3.js的v5版本入門教程（第十四章）

    這一章我們來繪製一個力導向圖，什麼叫力導向圖，通俗一點將就是有節點和線組成，當滑鼠拖拽一個節點時，其他節點都會受到影響（力導向圖有多種型別，本章繪製的效果就是這樣，其他型別的讀者可以自己去試試），還是給讀者提個醒，這一章又會有很多新的知識點，請拿出的學習新東西的本領來

    為了繪製一個力導向圖，我們還是需要以下新的知識點

• d3.forceSimulation() ，新建一個力導向圖，
• d3.forceSimulation().force(),新增或者移除一個力，這裡給出官方示例： 

    這裡說明一下對於d3.forceSimulation().force(name)，也就是當force中只有一個引數，這個引數是某個力的名稱，那麼這段程式碼返回的是某個具體的力，（根據上面圖片官方對force的說明也可以知道），例如d3.forceSimulation().force(“link”)，則返回的是d3.forceLink()這個力，注意對照上面的圖片，這個用法在下面會經常被用到

• d3.forceSimulation().nodes()，輸入是一個數組，然後將這個輸入的陣列進行一定的資料轉換，例如新增座標什麼的！這裡給出官方API的解釋

    從這裡可以看出，差不多就是上面作者講的那個意思

• d3.forceLink.links()，這裡輸入的也是一個數組（邊集），然後對輸入的邊集進行轉換，等一下我們會看到，它到底被轉換成什麼樣子的
• tick函式，這個函式對於力導向圖來說非常重要，因為力導向圖是不斷運動的，每一時刻都在發生更新，所以需要不斷更新節點和連線的位置
• d3.drag(),是力導向圖可以被拖動

    好了，有了這些基礎知識後，我們開始繪製一個力導向圖

    1、資料準備

var marge = {top:60,bottom:60,left:60,right:60}
    	var svg = d3.select("svg")
    	var width = svg.attr("width")
    	var height = svg.attr("height")
    	var g = svg.append("g")
    		.attr("transform","translate("+marge.top+","+marge.left+")");
    		
    	//準備資料
    	var nodes = [//節點集
    		{name:"湖南邵陽"},
    		{name:"山東萊州"},
    		{name:"廣東陽江"},
    		{name:"山東棗莊"},
    		{name:"澤"},
    		{name:"恆"},
    		{name:"鑫"},
    		{name:"明山"},
    		{name:"班長"}
    	];
    	
    	var edges = [//邊集
    		{source:0,target:4,relation:"籍貫",value:1.3},
    		{source:4,target:5,relation:"舍友",value:1},
    		{source:4,target:6,relation:"舍友",value:1},
    		{source:4,target:7,relation:"舍友",value:1},
    		{source:1,target:6,relation:"籍貫",value:2},
    		{source:2,target:5,relation:"籍貫",value:0.9},
    		{source:3,target:7,relation:"籍貫",value:1},
    		{source:5,target:6,relation:"同學",value:1.6},
    		{source:6,target:7,relation:"朋友",value:0.7},
    		{source:6,target:8,relation:"職責",value:2}
    	];
 

    2、設定一個顏色比例尺

//設定一個color的顏色比例尺，為了讓不同的扇形呈現不同的顏色
    	var colorScale = d3.scaleOrdinal()
    		.domain(d3.range(nodes.length))
    		.range(d3.schemeCategory10);

    3、新建一個力導向圖

var forceSimulation = d3.forceSimulation()
    		.force("link",d3.forceLink())
    		.force("charge",d3.forceManyBody())
    		.force("center",d3.forceCenter());

    其實上面那一段程式碼你就可以從官網上面複製下來（我也是這麼幹的） 

   4、生成節點資料

//生成節點資料
    	forceSimulation.nodes(nodes)
    		.on("tick",ticked);//這個函式很重要，後面給出具體實現和說明

    注意，這裡出現了tick函式，我把它的實現寫到了一個有名函式ticked（以前我們是不是寫的都是無名函式）

    5、生成邊集資料

//生成邊資料
    	forceSimulation.force("link")
    		.links(edges)
    		.distance(function(d){//每一邊的長度
    			return d.value*100;
    		}) 

    注意，這裡出現了forceSimulation.force(name)的用法，前面已經詳細解釋了它的返回值

    6、設定圖形中心位置

//設定圖形的中心位置	
    	forceSimulation.force("center")
    		.x(width/2)
    		.y(height/2);

    這裡也是forceSimulation.force(name)的用法

    7、輸出頂點集和邊集

//在瀏覽器的控制檯輸出
    	console.log(nodes);
    	console.log(edges);

    頂點集的樣子

    邊集的樣子

    8、繪製邊

//繪製邊
    	var links = g.append("g")
    		.selectAll("line")
    		.data(edges)
    		.enter()
    		.append("line")
    		.attr("stroke",function(d,i){
    			return colorScale(i);
    		})
    		.attr("stroke-width",1);

    這裡注意一下，應該先繪製邊，在繪製頂點，因為在d3中，各元素是有層級關係的，先繪製的在下面

    9、邊上的文字

var linksText = g.append("g")
    		.selectAll("text")
    		.data(edges)
    		.enter()
    		.append("text")
    		.text(function(d){
    			return d.relation;
    		})

    10、老規矩，先建立用來放在每個節點和對應文字的分組<g>

var gs = g.selectAll(".circleText")
    		.data(nodes)
    		.enter()
    		.append("g")
    		.attr("transform",function(d,i){
    			var cirX = d.x;
    			var cirY = d.y;
    			return "translate("+cirX+","+cirY+")";
    		})
    		.call(d3.drag()
    			.on("start",started)
    			.on("drag",dragged)
    			.on("end",ended)
    		);

    注意，這裡出現了drag函式，對於call函式大家應該比較熟悉了！我們也可以發現，這裡使用了三個有名函式，具體實現後面會給出

    11、節點和文字

//繪製節點
    	gs.append("circle")
    		.attr("r",10)
    		.attr("fill",function(d,i){
    			return colorScale(i);
    		})
    	//文字
    	gs.append("text")
    		.attr("x",-10)
    		.attr("y",-20)
    		.attr("dy",10)
    		.text(function(d){
    			return d.name;
    		})

    注意，這裡的文字的到需要根據轉換後資料的特點得到！！！

    12、ticked函式的實現

function ticked(){
    		links
    			.attr("x1",function(d){return d.source.x;})
    			.attr("y1",function(d){return d.source.y;})
    			.attr("x2",function(d){return d.target.x;})
    			.attr("y2",function(d){return d.target.y;});
    			
    		linksText
    			.attr("x",function(d){
    			return (d.source.x+d.target.x)/2;
    		})
    		.attr("y",function(d){
    			return (d.source.y+d.target.y)/2;
    		});
    			
    		gs
    			.attr("transform",function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    	}

    注意，可以發現，這裡寫的都是位置資訊，所以你在繪製相應的圖形元素的時候，位置資訊就不那麼重要的，而且，建議先寫完這個函式後，在進行測試

    13、drag

function started(d){
    		if(!d3.event.active){
    			forceSimulation.alphaTarget(0.8).restart();設定衰減係數，對節點位置移動過程的模擬，數值越高移動越快，數值範圍[0，1]
    		}
    		d.fx = d.x;
    		d.fy = d.y;
    	}
    	function dragged(d){
    		d.fx = d3.event.x;
    		d.fy = d3.event.y;
    	}
    	function ended(d){
    		if(!d3.event.active){
    			forceSimulation.alphaTarget(0);
    		}
    		d.fx = null;
    		d.fy = null;
    	}

    drag中有三個函式，在這裡進行了實現，其中d.fx和d.fy表示固定座標，例如，現在我們看到dragged函式，我們可以發現這樣的程式碼：d.fx = d3.event.x;  d.fy = d3.event.y;，也就是在拖動節點的時候，滑鼠位置在哪裡（d3.event），節點的固定位置就在哪裡，再看到ended函式，也就是結束拖動的時候觸發，可以發現，固定座標都為空，也就是不固定，這樣模擬的效果才好（你們也可以試試去掉ended函式會發生什麼，這樣可以更好的理解）

    最後，附上程式碼執行的結果

    效果還是很不錯的！！是不是感覺過程很複雜！沒關係，一步一步來，結果好就行

（效果瀏覽會出現亂碼，請諒解！但是整體效果和上面的截圖差不多，而且是動態的，可以滑鼠拖拽！）

（翻外篇）d3.js在網頁端視覺化neo4j圖資料庫

    為了讓大家更好的學習d3.js，“d3.js在網頁端視覺化neo4j圖資料庫”這是一個比較綜合的專案——利用neo4j的java驅動API從neo4j中取資料，並利用d3.js在網頁端進行視覺化。大家在學完基礎課程後可以做一下這個專案，進行鞏固。點選下面連結進行檢視：d3.js視覺化neo4j圖資料庫專案專欄