console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
width:800px;
height:700px;
border:1px solid
position: relative;
}
.handle{
position: absolute;
top:10px;
left:10px;
}
</style>
<body>
<div id="app">
<div class="handle">
<button onClick="toggleName()">显示/隐藏名称</button>
<button onClick="addNodes()">新增节点</button>
<button onClick="removeNode()">删除节点</button> 
<button onClick="forceToCenter()">回到中心</button> 
<span>当前节点:<b id="currentContent">（点击节点显示）</b></span>
</div>
</div>
</body>
<script src="//jsrun.net/AuUKp.js"></script>
<script>
const nodes = [
{name:'2.2.2.2',id:12,type:'ip'},
{name:'3.4.25.22',id:13,type:'ip'},
{name:'13020002299',id:14,type:'phone'},
{name:'asdmklasdlnlwee.pdf',id:15,type:'file'},
{name:'sdf78f6s87d5fsud7fts87d6587r23grbusd7f78',id:16,type:'md5'},
{name:'15838837736',id:17,type:'phone'},
]
const links = [
{source:12,target:13,relation:'长期'},
{source:12,target:14,relation:'长期'},
{source:12,target:15,relation:'长期'},
{source:14,target:16},
{source:14,target:17},
{source:17,target:14},
]
for(let i = 20;i<50;i++){
nodes.push({name:new Date().getTime(),id:i,type:'phone'});
links.push({source:12,target:i})
}
const option = {
dom:document.getElementById('app'),
color:'#00a8ff',
zoom:true,
key:'id',
icons:[
{type:'ip',icon:'M512 64C264.576 64 64 264.577 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64zM512 896c-212.078 0-384-171.923-384-384 0-212.077 171.922-384 384-384 212.077 0 384 171.923 384 384C896 724.077 724.077 896 512 896zM352 256c-17.673 0-32 14.327-32 32l0 448c0 17.674 14.327 32 32 32s32-14.326 32-32L384 288C384 270.327 369.673 256 352 256zM608 256 480 256c-17.673 0-32 14.326-32 32l0 448c0 17.674 14.327 32 32 32s32-14.326 32-32L512 576l96 0c88.366 0 160-71.635 160-160C768 327.634 696.366 256 608 256zM608 512l-96 0L512 320l96 0c53.02 0 96 42.98 96 96S661.02 512 608 512z'},
{type:'phone',icon:'M511.674921 947.28127A70.054603 70.054603 0 1 0 441.620317 877.714286a70.217143 70.217143 0 0 0 70.054604 69.566984z m0-91.347302A21.292698 21.292698 0 1 1 490.382222 877.714286a21.292698 21.292698 0 0 1 21.292699-21.780318zM808.634921 759.710476V83.382857A83.545397 83.545397 0 0 0 725.252063 0H298.747937A83.545397 83.545397 0 0 0 215.365079 83.382857v857.234286A83.545397 83.545397 0 0 0 298.747937 1024h426.504126a83.545397 83.545397 0 0 0 83.382858-83.382857V759.710476zM298.747937 48.761905h426.504126a34.620952 34.620952 0 0 1 34.620953 34.620952v651.946667H264.126984V83.382857A34.620952 34.620952 0 0 1 298.747937 48.761905zM759.873016 940.617143A34.620952 34.620952 0 0 1 725.252063 975.238095H298.747937A34.620952 34.620952 0 0 1 264.126984 940.617143v-156.525714h495.746032z'},
{type:'file',icon:'M867.655536 195.961726L699.888303 28.194493C681.891818 10.198008 657.496583 0 632.101543 0H223.981254C170.991603 0.199961 128 43.191564 128 96.181215v831.837531c0 52.98965 42.991603 95.981254 95.981254 95.981254h575.887522c52.98965 0 95.981254-42.991603 95.981253-95.981254V263.948448c0-25.39504-10.198008-49.990236-28.194493-67.986722zM792.070299 256.149971H639.90002V103.979691l152.170279 152.17028zM223.981254 928.018746V96.181215h319.937512v207.959383c0 26.594806 21.395821 47.990627 47.990627 47.990626h207.959383v575.887522H223.981254z'},
{type:'md5',icon:'M215 160.7h-38.2c-8.9 0-16.1 7.2-16.1 16.1v672c0 8.9 7.2 16.1 16.1 16.1H215c8.9 0 16.1-7.2 16.1-16.1v-672c0-8.8-7.2-16.1-16.1-16.1zM847.4 160.7h-38.2c-8.9 0-16.1 7.2-16.1 16.1v672c0 8.9 7.2 16.1 16.1 16.1h38.2c8.9 0 16.1-7.2 16.1-16.1v-672c0-8.8-7.2-16.1-16.1-16.1zM496 161.2h-38.2c-8.9 0-16.1 7.2-16.1 16.1v535.9c0 8.9 7.2 16.1 16.1 16.1H496c8.9 0 16.1-7.2 16.1-16.1V177.3c0-8.8-7.2-16.1-16.1-16.1zM355.5 161.2h-38.2c-8.9 0-16.1 7.2-16.1 16.1v535.9c0 8.9 7.2 16.1 16.1 16.1h38.2c8.9 0 16.1-7.2 16.1-16.1V177.3c0-8.8-7.2-16.1-16.1-16.1zM706.6 161.2H597.9c-8.9 0-16.1 7.2-16.1 16.1v535.9c0 8.9 7.2 16.1 16.1 16.1h108.7c8.9 0 16.1-7.2 16.1-16.1V177.3c0-8.8-7.2-16.1-16.1-16.1zM355.5 794.6h-38.2c-8.9 0-16.1 7.2-16.1 16.1v38.2c0 8.9 7.2 16.1 16.1 16.1h38.2c8.9 0 16.1-7.2 16.1-16.1v-38.2c0-8.9-7.2-16.1-16.1-16.1zM496 794.6h-38.2c-8.9 0-16.1 7.2-16.1 16.1v38.2c0 8.9 7.2 16.1 16.1 16.1H496c8.9 0 16.1-7.2 16.1-16.1v-38.2c0-8.9-7.2-16.1-16.1-16.1zM706.6 794.6H597.9c-8.9 0-16.1 7.2-16.1 16.1v38.2c0 8.9 7.2 16.1 16.1 16.1h108.7c8.9 0 16.1-7.2 16.1-16.1v-38.2c0-8.9-7.2-16.1-16.1-16.1z'},
],
currentClick:currentClickCallBack,
}
let charts = d3ForceEasy.initForce(option);
charts.update({nodes,links});
//++++++++++++++++++++++++++++++新增节点
const newNodes = [
{name:'13928287765',id:18,type:'phone'},
{name:'as76a675das78d6a87sd6f58as798as',id:19,type:'md5'}
];
const newLinks = [
{source:17,target:18},{source:17,target:19}
]
const newNodesSourceId = 15;
function addNodes(){
charts.update({nodes:nodes.concat(newNodes),links:links.concat(newLinks)})
}
function toggleName(){
d3ForceEasy.toggleName()
}
function removeNode(){
charts.update({nodes:[],links:[]})
}
function forceToCenter(){
d3ForceEasy.forceToCenter();
}
/*
* 返回选中数据
* */
let current = '';
function currentClickCallBack(e,d){
current = d;
document.getElementById('currentContent').innerHTML = current.type +':'+ current.name
}
</script>
</html>
#d3ForceEasyStage{
background: #fff;
}
#d3ForceEasyStage .hide{
display: none;
}
#d3ForceEasyStage .selected{
stroke: #a9e2ff;
stroke-width:5px;
}
#d3ForceEasyStage .force-node{
cursor: default;
}
#d3ForceEasyStage .link-label{
fill: #b6b6b6;
stroke: none;
font-size: 12px;
}