Javascript D3：有没有可能阻止物体离开边界？

我在d3图书馆遇到了一些麻烦

我有一些节点启用了force.drag（）函数。我要他们待在乡绅家里。我一直在尝试这种方法：

var force = d3.layout.force() 
    .size([w, h])
    .charge(-40) 
    .linkDistance(getLinkDistance)
    .gravity(0.01);

var drag = force.drag()
    .on("dragstart", onDragStart)
    .on("drag", onDrag);    

function onDragStart(d) {
    d.fixed = true;
}

function onDrag(d) {
    if (d.x < 0)
    d.x = 0;
    if (d.x > w)
    d.x = w;
    if (d.y < 0)
    d.y = 0;
    if (d.y > h)
    d.y = h;
}

 var newNodes = gnodes.enter().append("svg:g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 
        .call(drag); 

var-force=d3.layout.force（）
.尺寸（[w，h]）
。收费（-40）
.linkDistance（getLinkDistance）
.重力（0.01）；
var drag=force.drag（）
.on（“dragstart”，onDragStart）
.on（“拖动”，onDrag）；
启动功能（d）{
d、 固定=正确；
}
函数onDrag（d）{
如果（d.x<0）
d、 x=0；
如果（d.x>w）
d、 x=w；
如果（d.y<0）
d、 y=0；
如果（d.y>h）
d、 y=h；
}
var newNodes=gnodes.enter（）.append（“svg:g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）
.呼叫（拖动）；

不幸的是，拖动功能似乎忽略了这一点，对象仍然能够退出边界并变得不可见。如何防止拖动功能将对象移动到限制之外？为了澄清这一点，只有拖拽的物体必须留在乡绅体内，其他人可以随心所欲地剥皮

更新：

我通过添加dragend事件并释放其中的节点（如果坐标错误）部分解决了这个问题。现在，节点将至少从屏幕外部恢复。我还是不能操纵它

var drag = force.drag()
    .on("dragstart", onDragStart)
    .on("dragend", onDragEnd);


function onDragStart(d) {
    d.fixed = true;
}

function onDragEnd(d) {
    if (d.x < 0 || d.x > w || d.y < 0 || d.y > h)
    d.fixed = false;
}

var drag=force.drag（）
.on（“dragstart”，onDragStart）
.on（“dragend”，onDragEnd）；
启动功能（d）{
d、 固定=正确；
}
函数onDragEnd（d）{
如果（d.x<0 | | d.x>w | | d.y<0 | | d.y>h）
d、 固定=假；
}

刚刚解决了这个问题。出现时，px和py坐标需要固定：

var drag = force.drag()
    .on("dragstart", onDragStart)
    .on("drag", onDrag);

function validate(x, a, b) {
    if (x < a) x = a;
    if (x > b) x = b;
    return x;
}

function onDragStart(d) {
    d.fixed = true;
}

function onDrag(d) {
   d.px = validate(d.px, 0, w);
   d.py = validate(d.py, 0, h);
}

var drag=force.drag（）
.on（“dragstart”，onDragStart）
.on（“拖动”，onDrag）；
功能验证（x、a、b）{
如果（xb）x=b；
返回x；
}
启动功能（d）{
d、 固定=正确；
}
函数onDrag（d）{
d、 px=验证（d.px，0，w）；
d、 py=验证（d.py，0，h）；
}

仅仅更改数据是不够的，还需要用新的位置更新DOM元素。@Larskothoff不应该强制。drag（）函数通过调用update（）自动完成此操作？drag函数不会调用任何东西。您可能指的是force布局的

勾选

处理程序函数——原则上是的，但前提是布局仍在运行。@Larskothoff它在运行时，坐标不会更新。节点添加到svg后，节点对象的x和y参数似乎被忽略了。您能发布一个完整的示例来演示这个问题吗？我们可以在这里使用

函数validate（x，a，b）

以及

函数勾选（）中的所有x和y更改

的d3.ForceSimulation这救了我一天