今天給大家?guī)淼氖潜容^常見的力導(dǎo)圖。力導(dǎo)圖的應(yīng)用場景很多拜秧，表示關(guān)系連接的很多都可以用力導(dǎo)圖來實(shí)現(xiàn)痹屹，比如企業(yè)投資關(guān)系，汽車行程路線等等枉氮。

為了盡可能模擬工作中使用力導(dǎo)圖的場景志衍，我們這里直接使用json 數(shù)據(jù)來完成今天力導(dǎo)圖的制作。

模擬數(shù)據(jù) 和 初始化畫布

const width = 500,
          height = 500;

var svg  = d3.select('body')
              .append('svg')
              .attr('width', width)
              .attr('height', height);

var nodes = [ 
    { name: "XiaMen" },
    { name: "BeiJing"}, 
    { name: "XiAn" }, 
    { name: "HangZhou"},
    { name: "ShangHai"}, 
    { name: "QingDao"},
    { name: "NanJing"},
    { name: "QueShan"}

];

var links = [  
        { source : 'BeiJing'  , target: "XiaMen" } , 
        { source : 'BeiJing'  , target: "XiAn" } , 
        { source : 'BeiJing'  , target: "XiaMen" } , 
        { source : 'BeiJing'  , target: "HangZhou" } , 
        { source : 'BeiJing'  , target: "ShangHai" } , 
        { source : 'BeiJing'  , target: "QingDao" } , 
        { source : 'BeiJing'  , target: "NanJing" }, 
        { source : 'QueShan'  , target: "XiaMen" } , 
        { source : 'QueShan'  , target: "XiAn" } , 
        { source : 'QueShan'  , target: "XiaMen" } , 
        { source : 'QueShan'  , target: "HangZhou" } , 
        { source : 'QueShan'  , target: "ShangHai" } , 
        { source : 'QueShan'  , target: "QingDao" } , 
        { source : 'QueShan'  , target: "NanJing" } 
];  

通過布局將原始數(shù)據(jù)轉(zhuǎn)化為我們便于繪制力導(dǎo)圖的格式聊替。

通過內(nèi)置的函數(shù)楼肪，我們將數(shù)據(jù)進(jìn)行轉(zhuǎn)化，d3 v3到v4惹悄，由之前的d3.layout.force()變成了現(xiàn)在的d3.forceSimulation().

var simulation = d3.forceSimulation(nodes) // 根據(jù)指定的節(jié)點(diǎn)數(shù)組創(chuàng)建一個(gè)沒有作用力的仿真
                .force("link", d3.forceLink(links).distance(100).strength(1).id((d)=>d.name))  // 連線作用力
                .force("charge",d3.forceManyBody())  // 節(jié)點(diǎn)間的作用力
                .force("center",d3.forceCenter(width / 2, height / 2)); //重力春叫，布局的參考位置，力導(dǎo)向圖的中心點(diǎn)

具體這幾個(gè)api 可以查看這里泣港，在這里著重提一個(gè) id(d) => d.name,這里使用name屬性字段來進(jìn)行各個(gè)節(jié)點(diǎn)的連接暂殖，也可以把它設(shè)置成實(shí)際項(xiàng)目的中的字段。

經(jīng)過轉(zhuǎn)換 nodes 值

• index 節(jié)點(diǎn)的索引
• x 節(jié)點(diǎn)當(dāng)前x坐標(biāo)
• y 節(jié)點(diǎn)當(dāng)前y坐標(biāo)
• vx 節(jié)點(diǎn)當(dāng)前x速度
• vy 節(jié)點(diǎn)當(dāng)前y速度

把節(jié)點(diǎn)和連接加入到dom中

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

/ 繪制連線
var svg_links = svg.selectAll("line")
            .data(links)
            .enter()
            .append("line")
            .style("stroke","#ccc")
            .style("stroke-width",1)

// 繪制節(jié)點(diǎn)
 var svg_nodes = svg.selectAll("circle")
            .data(nodes)
            .enter()
            .append("circle")
            .attr("r",10)
            .style("fill",function(d,i){
                return color(i);
            })    
            .attr("cx",function(d){return d.x;})
            .attr("cy",function(d){return d.y;})

// 繪制文字
var svg_text = svg.selectAll("text")
            .data(nodes)
            .enter()
            .append("text")
            .style("fill","#000")
            .attr('font-size', '12px')
            .attr("dx",0)
            .attr("dy",20)
            .attr('text-anchor', 'middle')
            .text(function(d){return d.name;});

當(dāng)前畫布

在進(jìn)行到這一步時(shí)，當(dāng)前畫布上的所有節(jié)點(diǎn)和線和文字都堆在左上角惫东，這是由于此時(shí)采用了初始化布局計(jì)算的位置莉给，接下來，添加tick方法廉沮，將其計(jì)算并調(diào)整到合適的布局颓遏。

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

            svg_text
                .attr("x", function(d){ return d.x; })
                    .attr("y", function(d){ return d.y; });

            svg_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; });
    }

      simulation.on("tick",draw); 

力導(dǎo)向圖布局的形成是一個(gè)異步的過程，而且需要一定時(shí)間滞时。而tick會(huì)在節(jié)點(diǎn)增加減少叁幢，事件操作時(shí)都會(huì)觸發(fā)，實(shí)時(shí)計(jì)算坪稽。

此時(shí)的布局

添加拖動(dòng)

接下來曼玩，給力導(dǎo)向圖添加拖拽事件。

var svg_nodes = svg.selectAll("circle")
            .data(nodes)
            .enter()
            .append("circle")
            .attr("r",10)
            .style("fill",function(d,i){
                return color(i);
            })    
            .attr("cx",function(d){return d.x;})
            .attr("cy",function(d){return d.y;})
            .call(d3.drag().on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));

       function dragstarted(d) {
          if (!d3.event.active) simulation.alphaTarget(0.8).restart(); // 在交互時(shí)重新啟動(dòng)仿真窒百，比如拖拽了某個(gè)節(jié)點(diǎn)或使用simulation.stop暫停仿真之后進(jìn)行重新調(diào)整布局
          d.fx = d.x;
          d.fy = d.y;
        };

        function dragged(d) {
            d.fx = d3.event.x; // 設(shè)置當(dāng)前位置
            d.fy = d3.event.y;
        };

        function dragended(d) { 
            if (!d3.event.active) simulation.alphaTarget(0);  //  阻止仿真繼續(xù)計(jì)算位置
            d.fx = null;
            d.fy = null;
        };

d3.event.active代表的是除去當(dāng)前事件黍判，當(dāng)前正在發(fā)生的拖動(dòng)事件的個(gè)數(shù)。在dragStart的時(shí)候篙梢，如果沒有其他的拖拽事件顷帖，那么d3.event.active的將會(huì)是 0，仿真模擬計(jì)算將會(huì)被啟動(dòng)，各個(gè)點(diǎn)的位置將依次被計(jì)算贬墩；同樣的道理榴嗅，如果在dragended的時(shí)候，d3.event.active的如果是 0陶舞，說明計(jì)算的是最后一個(gè)點(diǎn)嗽测，此時(shí)可以關(guān)閉仿真模擬，不再計(jì)算肿孵。
事實(shí)上唠粥，如果不在每次拖拽過后手動(dòng)關(guān)閉仿真模擬，那么計(jì)算將會(huì)一直持續(xù)下去颁井，再也不能完成第二次拖拽。而在拖拽開始時(shí)不判斷開啟仿真模擬蠢护，那么你一次拖動(dòng)也不能完成雅宾。

最后的效果

接下來，我們可以給他們添加一些箭頭

   //添加defs標(biāo)簽  
    var defs = svg.append("defs");  
    //添加marker標(biāo)簽及其屬性  
    var arrowMarker = defs.append("marker")  
        .attr("id","arrow")  
        .attr("markerUnits","strokeWidth")  
        .attr("markerWidth",12)  
        .attr("markerHeight",12)  
        .attr("viewBox","0 0 12 12")  
        .attr("refX",20)  
        .attr("refY",6)  
        .attr("orient","auto")

    //繪制直線箭頭  
    var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";  
    arrowMarker.append("path")  
        .attr("d",arrow_path)  
        .attr("fill","red") 

最后的效果