js画力导图

最新推荐文章于 2022-08-27 21:57:00 发布

陈杉菜

最新推荐文章于 2022-08-27 21:57:00 发布

阅读量865

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_44702847/article/details/94476836

版权

本文介绍如何利用JavaScript进行力导向图的布局和实时刷新，展示力导图效果。

摘要由CSDN通过智能技术生成

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;