D3.js 力導向圖

花了大半天看了一個八十幾行的代碼..心累

力導向圖是之前就有畫過很多次的東西，但是這次的代碼看上去很陌生，然后發現是D3更新了4.0....

先貼代碼

var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
           .force("link",d3.forceLink().id(function(d){return d.id;}))
           .force("charge",d3.forceManyBody())
           .force("center",d3.forceCenter(width/2,height/2));

d3.json("miserables.json",function(error,graph){
    if(error) throw error;

    var link = svg.append("g")
               .attr("class","links")
               .selectAll("line")
               .data(graph.links)
               .enter().append("line")
               .attr("stroke-width",function(d){return Math.sqrt(d.value);});

    var node = svg.append("g")
               .attr("class","nodes")
               .selectAll("circle")
               .data(graph.nodes)
               .enter().append("circle")
               .attr("r",5)
               .attr("fill",function(d){return color(d.group);})
               .call(d3.drag()
                   .on("start",dragstarted)
                .on("drag",dragged)
                .on("end",dragended));

    simulation.nodes(graph.nodes)
              .on("tick",ticked)
              .force("link")
              .links(graph.links);

    function ticked(){
        link
          .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;});

        node
          .attr("cx",function(d){return d.x;})
          .attr("cy",function(d){return d.y;});
    }
  

});

   function dragstarted(d){
       if (!d3.event.active) simulation.alphaTarget(0.3).restart();
       d.fx=d.x;
       d.fy=d.y;
   }
   
   function dragged(d){
       d.fx=d3.event.x;
       d.fy=d3.event.y;
   }

   function dragended(d){
       if(!d3.event.active) simulation.alphaTarget(0);
       d.fx=null;
       d.fy=null;
   }

效果圖：

 

1.定義顏色比例尺

var color = d3.scaleOrdinal(d3.schemeCategory20);

2.創建一個力導向圖的模擬器（不一定准確吶，simulation自己直譯了）

var simulation = d3.forceSimulation()
           .force("link",d3.forceLink().id(function(d){return d.id;}))
           .force("charge",d3.forceManyBody())
           .force("center",d3.forceCenter(width/2,height/2));

第二句沒看懂，不知道為啥要這樣設置id，后面還有一句是跟simulation.force("link")有關的，沒搞懂這兩句的具體含義，先放一放吧，再看幾個圖可能能懂，能查的資料實在是太少了。

第三句后面沒有用到，應該是是用了默認值

第四句是設定圖的中心

 

3.繪制連線和節點

var link = svg.append("g")
               .attr("class","links")
               .selectAll("line")
               .data(graph.links)
               .enter().append("line")
               .attr("stroke-width",function(d){return Math.sqrt(d.value);});

    var node = svg.append("g")
               .attr("class","nodes")
               .selectAll("circle")
               .data(graph.nodes)
               .enter().append("circle")
               .attr("r",5)
               .attr("fill",function(d){return color(d.group);})
               .call(d3.drag()
                   .on("start",dragstarted)
                .on("drag",dragged)
                .on("end",dragended));

4.調用模擬器（和第三步順序可以調換）

    simulation.nodes(graph.nodes)
              .on("tick",ticked)
              .force("link")
              .links(graph.links);

第一句和最后一句很好理解，綁定數組。

第二句是為了更新坐標。

第三句沒看懂，應該和我上面那一句沒看懂有關系...先記着。

 

5.拖動節點的三個過程

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();  //restart是重新恢復模擬
  d.fx = d.x;    //d.x是當前位置，d.fx是固定位置
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;       //解除dragged中固定的坐標
  d.fy = null;
}

alpha是動畫的冷卻系數，運動過程中會不斷減小，直到小於0.005為止，此時動畫會停止。