D3.JS绘制力拓扑图（高亮显示节点+图例显示+缩放+拖拽）

D3.JS绘制力拓扑图（高亮显示节点+图例显示+缩放+拖拽）

注：转载请注明地址https://blog.csdn.net/qq_39360565/article/details/101171379
说明：本文描述所用到的数据是为了方便展示而设计的少量数据，页面显示会比较简陋，可根据自己需要调整布局。json数据格式会在文中展示出来。

1. 效果图（部分）

原始状态不显示线上的文字。

当鼠标放在节点上时，会触发监听事件，高亮显示相关节点，并显示相关连线上的文字。（此时鼠标指在点ddd上，高亮显示相关节点）

2.需要的js文件

js文件在d3.js官网上就可以下载

<script type="text/javascript" src="JS/d3.v4.js"></script>
<script type="text/javascript" src="JS/jquery-1.9.1.js"></script>

3.json数据格式

json文件格式（部分）：

{
	"nodes": [
    {"id": 1,"name": "a1","group": "你是谁"},
    {"id": 2,"name": "b1","group": "我是谁"}
    ],
    "links": [
    {"source": 1,"target": 2,"type": "m"}
    ]
}

id、name不用解释，主要是group和type这两个属性。
其中group属性是为了区分点的种类，表明该节点是属于哪一类，从而能够区分，主要在统计图例中用到，显示所有节点的种类。
type属性是连线上显示的文字，表示两个点之间的关系。

4.如何高亮显示节点

步骤1：将所有有关系的节点进行标记。（自己写的算法，不打算贴出来）
步骤2：参考以下代码：

var node = vis.selectAll("g.node")
            .data(data.nodes)
            .enter().append("svg:g")
            .attr("class", "node")
            .call(nodeDrag)    //绘图
            //鼠标放在点上触发的事件
            .on('mouseover', function (d) {

                linetext.style("fill-opacity", function (linetext) {
                    if (linetext.source == d || linetext.target == d) {

                        return 1;
                    }
                    if (linetext.source != d && linetext.target != d) {
                        return 0;
                    }
                });
                linetext.text(function (d) {
                    return d.type;
                });

                node.style("opacity",function (nodes) {
                    if(indexArray[d.id][nodes.id]==1||indexArray[nodes.id][d.id]==1){

                        return 1;
                    }
                    else{
                        if(nodes.id == d.id){
                            return 1;
                        }
                        else
                            return 0.1;
                    }
                });

                link.style("opacity", function (link) {
                    if (link.source == d || link.target == d) {
                        return 1;
                    }
                    if (link.source != d && link.target != d) {
                        return 0.1;
                    }
                });
            })
            //单击节点恢复原来的状态
            .on("click",function (d) {
                linetext.style("fill-opacity", 0);
                link.style("opacity", 1);
                node.style("opacity", 1);
            });

就先写到这里吧。。。。。