基于D3.js的企业关联图谱——风控可视化

说明

• 项目背景

  这个是一个金融建模比赛的题目，本人和队友拿了一等奖（感谢慷慨的金主爸爸）。该题目分析企业自身的主要数据，企业与企业、企业与个人、个人与个人之间的关系数据，建设企业的关联关系图谱，识别对公客户的关联关系，并找出关联关系中的风险点。

• 代码说明
  以下代码将是我GitHub中的其中一个页面，主要目的是展示企业之间的担保关系，其他关系的代码可以以此进行推演。主要框架是D3.js

• 开源地址（有用的话记得follow一下并点个star哦）
  https://github.com/lebron-li/Visualization-of-risk-control-based-on-Enterprise-Association-Graph.git

• 答辩ppt
  很多效果和使用说明在PPT中
  链接：https://pan.baidu.com/s/1Sl8EpcqTrQhiUrZH90wHzw
  提取码：1984
  复制这段内容后打开百度网盘手机App，操作更方便哦
  
  

效果展示

其实还有很多特性没写出来，有兴趣的可以clone去跑一跑

主要代码块

• 绑定body中的svg，并初始化simulation

//svg的元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。
var svg = d3.select(".svg1");
//为指定的类型调用每个注册的回调，将指定的参数传递给回调，并将其作为 this 上下文
        svg.call(d3.zoom() //对zoom这个事件进行链式调用绑定事件
            .scaleExtent([0.1, 8])//使用scaleExtent来控制zoom的缩小和扩大范围
            .on("zoom", function () {
   //在svg绑定zoom事件后，监听zoom事件，然后将缩放结果返回给绑定的g，直接给g绑定zoom会出现抖动情况，体验很差
                $("g").attr("transform", d3.event.transform)
            })
        );
		//无论屏幕大小是多少，每次关联图谱的初始化中心都能在一个合适的位置
        var svgCenterWidth=document.documentElement.clientWidth/3;
        var svgCenterHeight=document.documentElement.clientHeight/2;
		//利用d3.forcesimulation（）定义关系图
		//包括设置边link，排斥电荷charge，关系图中心点，表示如何展示
        var simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(function (d) {
   
                return d.id;
            }))
            //使用默认参数创建新的多实体力
            //API可参考https://github.com/d3/d3-force/blob/v2.1.1/README.md#forceManyBody
            .force("charge", d3.forceManyBody())
            //使用指定的x和y坐标创建新的定心力
			//API可参考https://github.com/d3/d3-force/blob/v2.1.1/README.md#forceCenter
            .force("center", d3.forceCenter(svgCenterWidth, svgCenterHeight));

对于forceSimulation的优化可参考D3.js 力导向图的显示优化

• 数据驱动部分

var graph;
        d3.json("../../res/json/guarantee_json/demo.json", function (error, data) {
   
            if (error) throw error;
            graph = data;
			//g用于绘制所有边,selectALL选中所有的line,并绑定数据data(graph.links)
			//enter().append("line")添加元素
            var link = svg.append("g").attr("class", "links")
                .selectAll("line").data(graph.links)//数据驱动文档
                .enter().append("line")
                .attr("stroke-width", function (d) {
   
                	//这里设置边的粗细，d.amount是数据中一次担保关系的担保金额
                	//如果担保金额越大，边就越粗
                	//为了展示效果，调用了math.sqrt进行了两次开方
                    return Math.sqrt(Math.sqrt(d.amount))/20;
                })
			//把担保金额显示在边上
            var edgesText = svg.append("g")
                .selectAll('.linetext')
                .data(graph.links)
                .enter() // 对所有的links，可能是null元素
                .append('text') 
                .attr('class',"edgesTexts")
                .text((d) => {
   
                    return d.amount;
                })
                .attr("font-size", function (d) {
   
                    return 5;
                })
                .attr('fill','#f2f2f2')
                .attr('opacity'