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为止，此时动画会停止。