- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我将新节点添加到 D3 的强制布局时,新节点在定位自身时会忽略先前的节点,并且先前的节点变得不可拖动。我觉得我遵循的逻辑是:
但仍然会导致之前的节点断开连接。新节点是可拖动的,并且似乎考虑了最后一组添加的节点位置并避免了碰撞,所有其他先前的节点仍然可单击,但它们的位置被忽略并且不更新。
这是 PLNKR 中的代码:http://plnkr.co/edit/5fXZf63s73cTO37zLjNQ?p=preview
var width = 1000;
var height = 600;
var node_w = 30;
var node_h = 30;
var text_dx = -20;
var text_dy = 20;
var new_id = 9;
var nodes = [],
links = [],
links_line,
node_circles;
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
var nodes = [
{ "name": "Nucleus" , "size" : 25, "id" : 0 , "color":"#ac0000"},
{ "name": "one" , "size" : 5 , "id": 1 , "color": "#ac0"},
{ "name": "two" , "size" : 15 , "id": 2 , "color": "#ac0"},
{ "name": "three" , "size" : 25 , "id": 3 , "color": "#ac0"},
{ "name": "four" , "size" : 9 , "id": 4 , "color": "#ac0"},
{ "name": "five" , "size" : 12 , "id": 5 , "color": "#ac0"},
{ "name": "six" , "size" : 15 , "id": 6 , "color": "#ac0"},
{ "name": "seven" , "size" : 41 , "id": 7 , "color": "#ac0"},
{ "name": "eight" , "size" : 5 , "id": 8 , "color": "#ac0"}
];
var links = [
{ "source": 0 , "target": 1 , "link_info":"r01" },
{ "source": 1 , "target": 2 , "link_info":"r31" },
{ "source": 1 , "target": 3 , "link_info":"r02" },
{ "source": 1 , "target": 4 , "link_info":"r04" },
{ "source": 0 , "target": 5 , "link_info":"r05" },
{ "source": 0 , "target": 6 , "link_info":"r06" },
{ "source": 0 , "target": 7 , "link_info":"r87" },
{ "source": 0 , "target": 8 , "link_info":"r87" }
];
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([width, height])
.linkDistance(150)
.charge(-1400);
var drag = force.drag();
init();
function init() {
force.start();
links_line = svg.selectAll("line")
.data(links)
.enter()
.append("line")
.style("stroke", "#ac0")
.style("stroke-width", 1);
node_circles = svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.style("fill", function(d) {return d.color;})
.on("dblclick", function(d, i) {
addNodes(i);
})
.call(drag);
draw();
}
function addNodes(i) {
for (c=0; c < Math.floor(Math.random() * 20) + 4; c++) {
nodes.push({"name": "new " + new_id,"size": (Math.floor(Math.random() * 20) + 10),"id": new_id,"color": "#333"})
links.push({"source": i,"target": new_id,"link_info": "r"+i+new_id});
new_id++;
}
// Update force.nodes
force.nodes(nodes);
// Update force.links
force.links(links);
// exec init()
init();
}
function draw() {
var ticksPerRender = 1;
requestAnimationFrame(function render() {
force.tick();
//Update nodes
node_circles.attr("cx", function(d) {return d.x - d.size / 6;});
node_circles.attr("cy", function(d) {return d.y - d.size / 6;});
node_circles.attr("r", function(d) {return d.size});
//Update Location line
links_line.attr("x1", function(d) {return d.source.x;});
links_line.attr("y1", function(d) {return d.source.y;});
links_line.attr("x2", function(d) {return d.target.x;});
links_line.attr("y2", function(d) {return d.target.y;});
requestAnimationFrame(render)
});
} // draw();
最佳答案
更新 d3 可视化遵循输入、更新和退出工作流程(开始阅读 here 和 here)。
试试这个:
function init() {
force.start();
links_line = svg.selectAll("line")
.data(links);
links_line
.enter()
.append("line")
.style("stroke", "#ac0")
.style("stroke-width", 1);
links_line.exit().remove();
node_circles = svg.selectAll("circle")
.data(nodes);
node_circles
.enter()
.append("circle")
.style("fill", function(d) {return d.color;})
.on("dblclick", function(d, i) {
addNodes(i);
})
.call(drag);
draw();
}
已更新example .
关于javascript - D3JS强制布局新节点断开现有节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27930803/
是否可以在蓝牙设备连接到 iOS 或从 iOS 断开连接时收到通知,即使我的应用程序处于后台?在 Android 上,我使用 ACTION_ACL_CONNECTED 和 ACTION_ACL_DIS
我对使用 Delphi 使用 USB 设备感到不舒服,并且对编写设备驱动程序的细节几乎一无所知(尽管我在学习使用 GoASM 进行汇编时遇到过一些)。 该设备可以是 USB 调制解调器或 USB 打印
我正在使用 java/servlet 和前端 JSP 开发 Web 应用程序。 我的页面为用户显示一些信息。 是否有任何适当的方法来检查网络连接是否处于 Activity 状态(开/关)以及支持所有浏
这个问题在这里已经有了答案: C# -- TcpListener.Start() causing SocketException with message "Only one usage of ea
我想向我的应用程序添加功能,以允许在 Windows 操作系统上检测播放/捕获设备的到达和断开连接。就像在 Skype 中一样 - 当您拔下设备时 - 它会显示设备丢失的通知,例如要求您选择另一个。
如何断开 org. apache. http. client.HttpClient 对象? 我正在这样创建它,但它没有任何 disconnect() 或 getHttpConnectionManage
我们正在开发一个 .NET 应用程序,其中一个要求是监视系统是否连接到 Internet。 我们能够获得“以太网电缆断开连接”的 .NET 事件,但如果调制解调器被重置,则不会触发此事件。我不想一直通
我正在尝试与使用自签名证书的后端服务器建立 websocket 连接。在 Firefox 中,我为自签名证书添加了一个异常(exception)。 但是我的 websocket 连接 wss://连接
我正在使用由 Excel 生成的用户窗体来修改 PowerPoint 演示文稿(这是避免需要启用宏的电子表格的迂回方法)。该表单工作得很好,但每次我将焦点放在它上时,Excel 应用程序都会获得焦点(
您好,我成功地开始了视频通话,但是当我断开视频通话时,摄像头 LED 指示灯仍然亮着。我怎样才能完全断开通话? Video.createLocalVideoTrack().then(track =>
您好,我成功地开始了视频通话,但是当我断开视频通话时,摄像头 LED 指示灯仍然亮着。我怎样才能完全断开通话? Video.createLocalVideoTrack().then(track =>
我正在尝试断开客户端与服务器的连接,但服务器仍将其视为已连接。我找不到解决这个问题的方法,关机、断开连接和关闭都不起作用。 我与客户端断开连接并检查服务器的一些代码: 客户: private vo
我正在使用 magic record 来完成我所有的核心数据工作。 一切都很好,除了有时我在后台进行更新时我需要从上下文中分离或断开实体。 例如 ButtonList = [Buttons MR_fi
我正在尝试实现一个颜色选择器,它从屏幕上各处的像素中获取颜色。为此,我计划使用全局鼠标 Hook 来监听 WM_MOUSEMOVE,以便在鼠标四处移动时更新颜色,并监听鼠标点击以确认 (WM_LBUT
我有一个使用 C# 编写的 TLS 连接的客户端/服务器 TCP 场景。 客户端在安静并恢复后无法传递消息(不活动时间约为 25 分钟)。但如果我让客户聊天(每 30 秒),就没有问题。 客户端和服务
我编写的这段代码完美运行,但我担心每 2 秒执行一次 ping 操作会消耗太多资源,或者可能导致互联网连接出现一些问题。 new Thread(() => {
关闭带有附加 MediaPlayer 的 MediaController 的正确方法是什么? 您不能执行 mediaController.setMediaPlayer(null) - 立即调用 upd
从我的笔记本电脑上断开外接显示器后,我丢失了一些应用程序,因为断开连接的显示器仍设置为默认显示器。我的一些窗口试图在断开连接的显示器上显示。 我有一个解决方法,例如右键单击应用程序图标并选择移动,然后
是否可以将分片节点从分片集中取出并独立运行? 例如,每个分片都有一个特定的客户。 谢谢。 最佳答案 是的,这是可能的。 MongoDB“主”节点不知道分片。只有路由器(和配置服务器)知道。如果您使用正
我正在探索 Cassandra 及其复制系统。为此,我在本地创建了 3 个节点并测试了不同的场景。我想暂停节点之间的通信,用相同的键写入不同的值,然后观察它们将决定什么。 那么问题来了:如何限制节点在
我是一名优秀的程序员,十分优秀!