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

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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页