Javascript 限制每个节点的拖动区域d3.js

我有一个d3.js的应用程序，其中我需要通过圆形/矩形限制每个节点的拖动区域。对于每个节点，该拖动区域可能是静态的，可能包含在其json数据中。 这里我找到了一个例子，但它不能满足我的要求

我想要的是这样的：

这是我需要做这些事情的例子

身体{
背景：url（images/bg.jpg）重复；
}
svg{
保证金：0自动；
显示：块；
}
.链接{
行程：51565b；
笔画宽度：20；
笔画不透明度：1；
}
可变宽度=800，
高度=600
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var-force=d3.layout.force（）
.重力（1）
.连接距离（功能（d）{
返回d.距离；
})
.费用（-40000）
.尺寸（[宽度、高度]）；
var datajson={
“节点”：[{
“姓名”：“a”，
“节点id”：“10”，
“集团”：2，
“节点\u img”：http://loremflickr.com/320/240/dog"
}, {
“名称”：“b”，
“集团”：1，
“节点id”：“11”，
“节点\u img”：http://loremflickr.com/320/240/dog"
}, {
“姓名”：“c”，
“集团”：1，
“节点id”：“12”，
“节点\u img”：http://loremflickr.com/320/240/dog"
}
],
“链接”：[{
“来源”：0，
"目标":一,，
“价值”：1，
“距离”：400
}, {
“来源”：1，
"目标":二,，
“价值”：2，
“距离”：300
}, {
“来源”：2，
“目标”：0，
“价值”：3，
“距离”：300
}]
}
var numNodes=datajson.nodes.length
var r=20；
forEach（函数（node，i）{
node.x=width/2+r*Math.sin（2*Math.PI*i/numNodes）
node.y=height/2+r*Math.cos（2*Math.PI*i/numNodes）
})
武力
.nodes（datajson.nodes）
.links（datajson.links）
.start（）；
var drag=force.drag（）
.on（“拖动”，dblclick）；
var link=svg.selectAll（“.link”）
.data（datajson.links）
.enter（）.append（“行”）
.attr（“类”、“链接”）；
var node=svg.selectAll（“.node”）
.data（datajson.nodes）
.enter（）.append（“g”）
.attr（“类”，函数（d）{return“node”+“class”+d.node\u id}）
.呼叫（强制拖动）；
//圈
var circle=node.append（“圆”）
.attr（“r”，55岁）
.attr（“id”，函数（d）{return d.node_id}）
.style（“fill”，函数（d）{return'rgba（81,86,91,1）}）
.attr（“类”，函数（d）{返回“圆”+d.node\u id}）；
//形象
node.append（“图像”）
.attr（“x”，-37）
.attr（“y”，-37）
.attr（“宽度”，75）
.attr（“高度”，75）
.attr（“xlink:href”，函数（d）{
返回d.node\u img；
});
force.on（“勾号”，函数（）{
link.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
});
node.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
});
函数dblclick（d）{
}

有一种方法可以做到这一点：

身体{
背景：url（images/bg.jpg）重复；
}
svg{
保证金：0自动；
显示：块；
}
.链接{
行程：51565b；
笔画宽度：20；
笔画不透明度：1；
}
可变宽度=800，
高度=600
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var-force=d3.layout.force（）
.重力（1）
.连接距离（功能（d）{
返回d.距离；
})
.费用（-40000）
.尺寸（[宽度、高度]）；
var datajson={
“节点”：[{
“姓名”：“a”，
“节点id”：“10”，
“集团”：2，
“节点\u img”：http://loremflickr.com/320/240/dog",
“阻力半径”：150
}, {
“名称”：“b”，
“集团”：1，
“节点id”：“11”，
“节点\u img”：http://loremflickr.com/320/240/dog",
“阻力半径”：200
}, {
“姓名”：“c”，
“集团”：1，
“节点id”：“12”，
“节点\u img”：http://loremflickr.com/320/240/dog",
“阻力半径”：100
}],
“链接”：[{
“来源”：0，
"目标":一,，
“价值”：1，
“距离”：400
}, {
“来源”：1，
"目标":二,，
“价值”：2，
“距离”：300
}, {
“来源”：2，
“目标”：0，
“价值”：3，
“距离”：300
}]
}
var numNodes=datajson.nodes.length
var r=20；
forEach（函数（node，i）{
node.x=width/2+r*Math.sin（2*Math.PI*i/numNodes）
node.y=height/2+r*Math.cos（2*Math.PI*i/numNodes）
})
武力
.nodes（datajson.nodes）
.links（datajson.links）
.start（）；
var drag=force.drag（）
.打开（“拖动”，拖动）
.on（“dragstart”，dragstart）
.on（“dragend”，dragend）；
var link=svg.selectAll（“.link”）
.data（datajson.links）
.enter（）.append（“行”）
.attr（“类”、“链接”）；
var node=svg.selectAll（“.node”）
.data（datajson.nodes）
.enter（）.append（“g”）
.attr（“类”，函数（d）{
返回“node”+“class”+d.node\u id
})
.呼叫（强制拖动）；
//圈
var circle=node.append（“圆”）
.attr（“r”，55岁）
.attr（“id”，函数（d）{
返回d.node\u id
})
.样式（“填充”，功能（d）{
返回“rgba（81,86,91,1）”；
})
.attr（“类”，函数（d）{
返回“圆”+d.node\u id
});
//形象
node.append（“图像”）
.attr（“x”，-37）
.attr（“y”，-37）
.attr（“宽度”，75）
.attr（“高度”，75）
.attr（“xlink:href”，函数（d）{
返回d.node\u img；
});
force.on（“勾号”，函数（）{
link.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（y2），fu