js画力导图

布局结束后实现力导图结果

forceData = [];

d3.csv("test.csv",function(error,data){
    var forcelineWidth = 1;
    var forceLineColor = "#c6c6c6";
    var forceCircleR = 4;
    var forceCircleStroke = "#ffffff";
    var forceCircleStrokeWidth = 0.5;
    var forceOpacity = 0.8;
    var unselecetedColor = "#0000ff";

    var force_height = 755;
    var force_width = 760;
    var force_svg = d3.select('#mid')
                        .append("svg")
                        .attr("float","none")
                        .attr("height",force_height)
                        .attr("width",force_width);
                        
    Data = data;
    for(var i = 0 ; i < Data.length ;i++){
        forceData.push({
            source:parseInt(Data[i].source),
            target:parseInt(Data[i].target)
        });

    }
    console.log(forceData);

        var nodesId = [];
        for (var i = 0 ; i < nodeData.length ; i++){
            nodesId.push({
                id:parseInt(nodeData[i].id)
            })
        }
        var links = [];
        for(var i = 0 ;i < forceData.length ; i++){
            links.push({
                source:parseInt(forceData[i].source),
                target:parseInt(forceData[i].target)
            })
        }
        var simulation = d3.forceSimulation(nodesId)
                            .force("link",d3.forceLink(links).id(function(d){
                                return d.id;
                            }))
                            .force("charge",d3.forceManyBody())
                            .force("center",d3.forceCenter(force_width/2,force_height/2))
                            .on("end",function(){
                                console.log(links)
                                var link = force_svg.append("g")
                                                .attr("class","forcelink")
                                                .selectAll("line")
                                                .data(links)
                                                .enter()
                                                .append("line")
                                                .attr("stoke-width",forcelineWidth)
                                                .attr("stroke",forceLineColor)
                                                .attr("opacity",forceOpacity)
                                                .attr("id",function(d){
                                                    return "line" + d.source+"to"+d.target;
                                                })
                                var node = force_svg.append("g")
                                                .attr("class","forcenode")
                                                .selectAll("circle")
                                                .data(nodesId)
                                                .enter()
                                                .append("circle")
                                                .attr("opacity",forceOpacity)
                                                .style("fill",unselecetedColor)
                                                .attr("r",forceCircleR)
                                                .attr("id",function(d){
                                                    return "forceName"+d.name;
                                                })
                                                .attr("stroke",forceCircleStroke)
                                                .attr("stroke-width",forceCircleStrokeWidth)
                                                .on("click",function(d){
                                                    pointclick(d.name);
                                                    forceselect(d.name);
                                                })
                                                .call(d3.drag().on("start",dragstarted).on("drag",dragged).on("end",dragended));
                                console.log("end")
                            })

})

tick定时刷新力导图

d3.csv("test.csv",function(erroe,data){
    Data = data;
    for(var i=0;i<Data.length;i++){
        svg_edges.push({
            source:parseInt(Data[i].source),
            target:parseInt(Data[i].target)
        });
        // console.log(svg_edges);
    }

function drawforce(nodes,edges,svg){
    var nodesid=[];
    for(var i=0;i<nodes.length;i++){
        nodesid.push({
            name:parseInt(nodes[i].id)
        })
    }
    var links=[];
    for(i=0;i<edges.length;i++){
        links.push({
            source:parseInt(edges[i].source),
            target:parseInt(edges[i].target)
        })
    }
    var simulation = d3.forceSimulation()
                        .force("link",d3.forceLink().distance(10).id(function(d){
                            return d.name;
                        }))
                        .force("charge", d3.forceManyBody())
                        .force("center",d3.forceCenter(width/2,height/2));
    var link = svg.append("g")
                    .attr("class","force")
                    .selectAll("line")
                    .data(links)
                    .enter()
                    .append("line")
                    .attr("stroke-width",forceLineWidth)
                    .attr("stroke",forceLineColor)
                    .attr("opacity",forceOpacity)
                    .attr("id",function(d){
                        return "line"+d.source+"to"+d.target;
                    });
    var node = svg.append("g")
                    .attr("class","nodes")
                    .selectAll("circle")
                    .data(nodesid)
                    .enter()
                    .append("circle")
                    .attr("opacity",forceOpacity)
                    .style("fill",unselectedColor)
                    .attr("r",forceCircleR)
                    .attr("id",function(d){
                        return "force"+d.name;
                    })
                    .attr("stroke",forceCircleStroke)
                    .attr("stroke-width",forceCircleStrokeWidth)
                    .on("click",function(d){
                        pointclick(d.name);
                        forceselect(d.name);
                    })
                    .call(d3.drag()
                        .on("start",dragstarted)
                        .on("drag",dragged)
                        .on("end",dragended));
    simulation.nodes(nodesid)
            .on("tick", ticked)
            .force("link")
            .links(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(); //alpha是动画的冷却系数，运动过程中会不断减小，直到小于0.005为止，此时动画会停止。
        d.fx = d.x; //fx为固定坐标，x为初始坐标  注3>  
        d.fy = d.y;
    }

    //监听拖拽中  
    function dragged(d) {
        d.fx = d3.event.x; //fevent.x为拖拽移动时的坐标
        d.fy = d3.event.y;
    }

    //监听拖拽结束
    function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null; //固定坐标清空
        d.fy = null;
    }
}
var width = 500;
var height = 540;

var svg1 = div1phdiv.append("svg")
					.attr("float","none")
					.attr("width","100%")
                    .attr("height","100%");
                    
drawforce(nodeData,svg_edges,svg1);
});