从强制布局中删除两个节点失败,而一个成功
Removing two nodes from a Force Layout fails while one succeeds
我正在尝试从强制布局中删除一些节点。
过程的第一部分是选择一个或多个节点。这是通过点击处理程序完成的:
var nodeg = node.enter().append("g")
.attr("class", "node")
.on('click', function (n) {
if (n.dragging === true) {
return;
}
// select the clicked node
n.selected = !n.selected;
d3.select(this)
.transition()
.duration(500)
.ease('bounce')
.attr('fill', getNodeBackground(n))
.attr('transform', getNodeTransform(n));
})
.call(drag);
请注意,我将selected
设置为true。
接下来,如果用户按下delete
键,我将删除选中的节点:
function removeSelectedNodes() {
if (!confirm('Are you sure you want to delete the selected relationships?')) {
return;
}
var firstIndex = -1;
d3.selectAll('.node')
.each(function (n, i) {
if (n.selected !== true) {
return;
}
n.data.remove = true;
n.data.index = i;
if (firstIndex === -1) {
firstIndex = i;
}
});
var offset = 0;
_.each(_.where(scope.nodes, {data: {remove: true}}), function (n) {
var removeAt = n.index;
if (n.index > firstIndex) {
removeAt = n.index - 1 - offset;
offset++;
}
scope.nodes.splice(removeAt, 1);
scope.links.splice(removeAt - 1, 1);
});
renderGraph();
}
整个renderGraph
函数是这样的:
function renderGraph() {
force
.nodes(scope.nodes)
.links(scope.links)
.start();
var link = svg.selectAll(".link")
.data(scope.links);
link.exit().remove();
link.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(scope.nodes);
node.exit().remove();
var nodeg = node.enter().append("g")
.attr("class", "node")
.on('click', function (n) {
if (n.dragging === true) {
return;
}
// select the clicked node
n.selected = !n.selected;
d3.select(this)
.transition()
.duration(500)
.ease('bounce')
.attr('fill', getNodeBackground(n))
.attr('transform', getNodeTransform(n));
})
.call(drag);
nodeg.append("image")
.attr("xlink:href", function (d) {
return d.avatar || 'https://github.com/favicon.ico'
})
.attr("x", -56)
.attr("y", -8)
.attr("width", 64)
.attr("height", 64);
nodeg.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.attr('class', 'name')
.text(function (d) {
return d.displayName;
});
nodeg.append("text")
.attr("dx", 12)
.attr("dy", "1.35em")
.text(function (d) {
return d.relationship;
});
force.on("tick", function () {
link.attr("x1", function (d) {
return d.source.x;
})
.attr("y1", function (d) {
return d.source.y;
})
.attr("x2", function (d) {
return d.target.x;
})
.attr("y2", function (d) {
return d.target.y;
});
node.attr("transform", function (d) {
return getNodeTransform(d);
});
});
}
这是它开始向南的地方。如果我选择一个节点,则在拼接节点后图形将正确呈现。然而,如果我删除两个节点,图最终会保留第一个被删除的节点(通过索引)。
假设第一个节点(按索引)是"Bob",第二个节点是"Bill"。第二个节点将被删除,但第一个节点将保留。有趣的是,另一个节点,即当前的最后一个节点(按索引),将被删除。
注意:数组看起来不错。我想要删除的节点已经没有了,剩下的是正确的。
我在这里做错了什么?
UPDATE:我试过不设置 nodes
和links
删除节点后,只是调用start
:
force.start()
答案,再次感谢Lars,是在链接和节点中添加一个关键函数:
var link = svg.selectAll(".link")
.data(scope.links, function (d) {
return d.source.data._id + '|' + d.target.data._id;
});
var node = svg.selectAll(".node")
.data(scope.nodes, function (d) {
return d.data._id;
});
谢谢拉!
相关文章:
- Backbone fetch中的Ajax在fetch调用退出后完成,因此fetch调用中没有成功/失败事件
- jquery Ajax没有;不要显示任何信息(既不显示成功也不显示失败)
- 解析云代码不会记录/警告成功或失败
- Angular Cross Origin Request CORS失败,但节点http.get()成功返回
- 移动优先 - 加密缓存成功和失败处理程序
- 使用节点确定成功/失败.js函数 async.retry
- PageMethods调用使用1参数成功,但在2上失败(未知web方法)
- 如何根据ajax get请求的成功/失败在适当的范围内更改javascript变量
- ajax成功时调用self-object失败
- 检查客户端验证在服务器端成功/失败
- 如何监视 iframe 中请求的成功或失败
- 咖啡脚本化的 ajax 调用结果在实际成功时失败回调
- 如何在node中编写事件发射器.js让你创建一个函数“myFunction”,然后在运行时调用成功或失败
- jQuery AJAX 请求事件 - 完成,失败,成功
- 为什么 Ajax 请求成功,但最终以失败回调告终
- 如何在 $ 中执行异步操作.延迟,然后失败过滤回调并传递回成功链
- 第一次点击失败,第二次点击在 Ajax 调用 • JQuery / PHP 上成功
- Corodva 文件读取执行成功和失败回调
- $.ajax 成功,但回调不正确:报告失败
- 解析失败,出现: 类型错误: 无法读取未定义的属性“成功”