Javascript 限制D3有向图边界上的节点移动

我试图将节点移动限制在指定边界内。但我还没有成功。我知道勾选的方法需要做一些更改，我感到困惑。初学者与D3库

我已经在我的角度代码中集成了下面的有向图。

html标记：

Javascript代码：

var colors=d3.scaleOrdinal（d3.schemeCategory 10）；
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
节点，
链接
svg.append（'defs'）.append（'marker'））
阿特斯先生({
“id”：“箭头”，
'视图框'：'-0-5100'，
参考文献：13，
“refY”：0，
“方向”：“自动”，
“markerWidth”：13，
“markerHeight”：13，
“xoverflow”：“可见”
})
.append（'svg:path'）
.attr（'d'，'m0，-5l10，0l0,5'）
.attr（'fill'，'#999'）
.style（'stroke'，'none'）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}）.距离（100）.强度（1））
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
d3.json（“graph.json”，函数（错误，图形）{
如果（错误）抛出错误；
更新（graph.links、graph.nodes）；
})
功能更新（链接、节点）{
link=svg.selectAll（“.link”）
.数据（链接）
.输入（）
.附加（“行”）
.attr（“类”、“链接”）
.attr（'marker-end'，'url（#箭头）'
链接。附加（“标题”）
.text（函数（d）{返回d.type；}）；
edgepath=svg。选择全部（“.edgepath”）
.数据（链接）
.输入（）
.append（'路径'）
阿特斯先生({
“类”：“edgepath”，
“填充不透明度”：0，
“笔划不透明度”：0，
'id'：函数（d，i）{return'edgepath'+i}
})
.style（“指针事件”、“无”）；
edgelabels=svg.selectAll（“.edgelabel”）
.数据（链接）
.输入（）
.append（'文本'）
.style（“指针事件”、“无”）
阿特斯先生({
“类”：“edgelabel”，
'id'：函数（d，i）{return'edgelabel'+i}，
“字体大小”：10，
“填充”：“aaa”
});
edgelabels.append（'textPath'）
.attr（'xlink:href'，函数（d，i）{return'#edgepath'+i}）
.style（“文本锚定”、“中间”）
.style（“指针事件”、“无”）
.attr（“startOffset”，“50%”）
.text（函数（d）{return d.type}）；
node=svg.selectAll（“.node”）
.数据（节点）
.输入（）
.附加（“g”）
.attr（“类”、“节点”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
//.开启（“结束”，绘图）
);
node.append（“圆”）
.attr（“r”，5）
.style（“填充”，函数（d，i）{返回颜色（i）；}）
node.append（“标题”）
.text（函数（d）{返回d.id；}）；
node.append（“文本”）
.attr（“dy”，-3）
.text（函数（d）{返回d.name+“：“+d.label；}）；
模拟
.节点（节点）
。在（勾选）上；
模拟力（“链接”）
.链接（links）；
}
函数勾选（）{
链接
.attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
节点
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
EdgePath.attr（'d'，函数（d）{
返回'M'+d.source.x+''+d.source.y+'L'+d.target.x+''+d.target.y；
});
edgelabels.attr（'transform'，函数（d）{
if（d.target.x

只需添加一个函数，将允许的x/y值约束到您的边界：

function checkBounds(d){
  if (d.x < 0) d.x = 0;
  if (d.x > width) d.x = width;
  if (d.y < 0) d.y = 0;
  if (d.y > width) d.y = height;
}

运行示例：

.node{}
.link{stroke:#999；笔划不透明度：.6；笔划宽度：1px；}
svg{边框：1px纯黑}
var colors=d3.scaleOrdinal（d3.schemeCategory 10）；
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
节点，
链接
svg.append（'defs'）.append（'marker'））
阿特斯先生({
“id”：“箭头”，
'视图框'：'-0-5100'，
参考文献：13，
“refY”：0，
“方向”：“自动”，
“markerWidth”：13，
“markerHeight”：13，
“xoverflow”：“可见”
})
.append（'svg:path'）
.attr（'d'，'m0，-5l10，0l0,5'）
.attr（'fill'，'#999'）
.style（'stroke'，'none'）；
var simulation=d3.forceSimulation（）
.force（“link”，d3.forceLink（）.id（函数（d）{return d.id；}）.距离（100）.强度（1））
.force（“电荷”，d3.forceManyBody（））
.力（“中心”，d3.力中心（宽度/2，高度/2））；
变量图={
“节点”：[
{
“姓名”：“彼得”，
“标签”：“人”，
“id”：1
},
{
“姓名”：“迈克尔”，
“标签”：“人”，
“id”：2
},
{
“名称”：“Neo4j”，
“标签”：“数据库”，
“id”：3
},
{
“名称”：“图形数据库”，
“标签”：“数据库”，
“id”：4
}
],
“链接”：[
{
“来源”：1，
link
  .attr("x1", function (d) { 
      checkBounds(d.source);
      return d.source.x; 
    })
  .attr("y1", function (d) { 
      return d.source.y; 
    })
  .attr("x2", function (d) { 
      checkBounds(d.target);
      return d.target.x; 
    })
  .attr("y2", function (d) { 
    return d.target.y; 
    });

node
  .attr("transform", function (d) {
    checkBounds(d);
    return "translate(" + d.x + ", " + d.y + ")";                 
  });