- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
考虑到这个工作example ,数据更新使svg更新而不被重新绘制。使其行为如解释的相关原始代码部分:
// DATA JOIN
link = link.data(firstLinks ? graph.links1 : graph.links2);
// DATA JOIN
node = node.data(graph.nodes);
simulation.force("link")
.links(firstLinks ? graph.links1 : graph.links2);
但是,如果节点和链接数据引用是新的,即使内容相同,每次更新都会重新绘制 svg。
var new_graph_http_data = fetchNewData(); // unreferenced new data copy from graph
// DATA JOIN
link = link.data(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);
// DATA JOIN
node = node.data(new_graph_http_data.nodes);
simulation.force("link")
.links(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);
Here ,在函数 update() 中,调用 update_local() 将使图形按预期工作。调用 update_http() 将使图形重新绘制。
// Local working vs fetch (clone)
function update() {
/* Original working version */
// update_local();
/* Re-drawing version */
update_http();
};
update();
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<style>
/* Style Definitions */
button {
position: absolute;
top: 1em;
left: 1em;
}
.node {
stroke: white;
stroke-width: 2px;
}
.link {
stroke: gray;
stroke-width: 2px;
}
</style>
<button type="button" id="switch-btn">Switch Links</button>
<svg width="500" height="300"></svg>
<!--<script src="https://d3js.org/d3.v4.min.js"></script>-->
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>
// graph data store
// Part of original blocks-data.json
var graph = {
"nodes": [
{ "id": "0", "group": "1" },
{ "id": "1", "group": "2" },
{ "id": "2", "group": "2" },
{ "id": "3", "group": "2" },
{ "id": "4", "group": "2" },
{ "id": "5", "group": "3" },
{ "id": "6", "group": "3" },
{ "id": "7", "group": "3" },
{ "id": "8", "group": "3" }
],
"links1": [
{ "source": "0", "target": "1"},
{ "source": "0", "target": "2"},
{ "source": "0", "target": "3"},
{ "source": "0", "target": "4"},
{ "source": "1", "target": "5"},
{ "source": "2", "target": "6"},
{ "source": "3", "target": "7"},
{ "source": "4", "target": "8"},
{ "source": "1", "target": "8"},
{ "source": "2", "target": "5"},
{ "source": "3", "target": "6"},
{ "source": "4", "target": "7"}
],
"links2": [
{ "source": "0", "target": "5"},
{ "source": "0", "target": "6"},
{ "source": "0", "target": "7"},
{ "source": "0", "target": "8"},
{ "source": "5", "target": "6"},
{ "source": "5", "target": "8"},
{ "source": "7", "target": "6"},
{ "source": "7", "target": "8"},
{ "source": "1", "target": "5"},
{ "source": "2", "target": "6"},
{ "source": "3", "target": "7"},
{ "source": "4", "target": "8"}
]
};
// state variable for current link set
var firstLinks = true;
// svg and sizing
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// d3 color scheme
var color = d3.scaleOrdinal(d3.schemeCategory10);
// elements for data join
var link = svg.append("g").selectAll(".link"),
node = svg.append("g").selectAll(".node");
// simulation initialization
var simulation = d3.forceSimulation()
.force("link", d3.forceLink()
.id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody()
.strength(function(d) { return -500;}))
.force("center", d3.forceCenter(width / 2, height / 2));
// button event handling
d3.select("#switch-btn").on("click", function() {
firstLinks = !firstLinks;
update();
});
// follow v4 general update pattern
function update_local() {
// Update link set based on current state
// DATA JOIN
link = link.data(firstLinks ? graph.links1 : graph.links2);
// EXIT
// Remove old links
link.exit().remove();
// ENTER
// Create new links as needed.
link = link.enter().append("line")
.attr("class", "link")
.merge(link);
// DATA JOIN
node = node.data(graph.nodes);
// EXIT
node.exit().remove();
// ENTER
node = node.enter().append("circle")
.attr("class", "node")
.attr("r", 10)
.attr("fill", function(d) {return color(d.group);})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
)
.merge(node);
// Set nodes, links, and alpha target for simulation
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(firstLinks ? graph.links1 : graph.links2);
simulation.alphaTarget(0.3).restart();
}
// follow v4 general update pattern
function update_http() {
var new_graph_http_data = fetchNewData();
// Update link set based on current state
// DATA JOIN
link = link.data(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);
// EXIT
// Remove old links
link.exit().remove();
// ENTER
// Create new links as needed.
link = link.enter().append("line")
.attr("class", "link")
.merge(link);
// DATA JOIN
node = node.data(new_graph_http_data.nodes);
// EXIT
node.exit().remove();
// ENTER
node = node.enter().append("circle")
.attr("class", "node")
.attr("r", 10)
.attr("fill", function(d) {return color(d.group);})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
)
.merge(node);
// Set nodes, links, and alpha target for simulation
simulation
.nodes(new_graph_http_data.nodes)
.on("tick", ticked);
simulation.force("link")
.links(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);
simulation.alphaTarget(0.3).restart();
}
// drag event handlers
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
// tick event handler (nodes bound to container)
function ticked() {
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
// Value copying function
function fetchNewData() {
var idx, tempStr;
var obj = {
"nodes": [],
"links1": [],
"links2": [],
};
for (idx in graph.nodes) {
tempStr = JSON.stringify(graph.nodes[idx]);
tempStr = JSON.parse(tempStr);
obj.nodes.push(tempStr);
}
for (idx in graph.links1) {
tempStr = JSON.stringify(graph.links1[idx]);
tempStr = JSON.parse(tempStr);
obj.links1.push(tempStr);
}
for (idx in graph.links2) {
tempStr = JSON.stringify(graph.links2[idx]);
tempStr = JSON.parse(tempStr);
obj.links2.push(tempStr);
}
return obj;
}
</script>
</html>
最佳答案
虽然您专注于进入/更新/退出周期,但问题在于 d3-force:代表节点本身的对象存储自己的位置数据。
D3-force 修改每个节点的基准以包括位置属性。这些属性是 tick 函数用来放置节点的属性:
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
})
除了
d.x
和
d.y
,有
d.vx
和
d.vy
特性。如果节点不具有这些属性,则力将创建并分配它们。如果删除所有节点并用不带
x
的新对象替换它们,
y
属性,力将创建和初始化这些属性,而不考虑以前的节点(毕竟,它们不再是模拟的一部分。从视觉上看,这将使它看起来像所有旧节点/链接都已退出并进入新节点)。
x
,
y
,
dx
,
dy
如果您想要从旧节点到新对象的属性,例如:
var old = simulation.nodes()
newGraph.nodes.forEach(function(node,i) {
node.x = old[i].x;
node.y = old[i].y;
node.vx = old[i].vx;
node.vy = old[i].vy;
})
Update Fiddle
// Local working vs fetch (clone)
function update() {
/* Original working version */
// update_local();
/* Re-drawing version */
update_http();
};
update();
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<style>
/* Style Definitions */
button {
position: absolute;
top: 1em;
left: 1em;
}
.node {
stroke: white;
stroke-width: 2px;
}
.link {
stroke: gray;
stroke-width: 2px;
}
</style>
<button type="button" id="switch-btn">Switch Links</button>
<svg width="500" height="300"></svg>
<!--<script src="https://d3js.org/d3.v4.min.js"></script>-->
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>
// graph data store
// Part of original blocks-data.json
var graph = {
"nodes": [
{ "id": "0", "group": "1" },
{ "id": "1", "group": "2" },
{ "id": "2", "group": "2" },
{ "id": "3", "group": "2" },
{ "id": "4", "group": "2" },
{ "id": "5", "group": "3" },
{ "id": "6", "group": "3" },
{ "id": "7", "group": "3" },
{ "id": "8", "group": "3" }
],
"links1": [
{ "source": "0", "target": "1"},
{ "source": "0", "target": "2"},
{ "source": "0", "target": "3"},
{ "source": "0", "target": "4"},
{ "source": "1", "target": "5"},
{ "source": "2", "target": "6"},
{ "source": "3", "target": "7"},
{ "source": "4", "target": "8"},
{ "source": "1", "target": "8"},
{ "source": "2", "target": "5"},
{ "source": "3", "target": "6"},
{ "source": "4", "target": "7"}
],
"links2": [
{ "source": "0", "target": "5"},
{ "source": "0", "target": "6"},
{ "source": "0", "target": "7"},
{ "source": "0", "target": "8"},
{ "source": "5", "target": "6"},
{ "source": "5", "target": "8"},
{ "source": "7", "target": "6"},
{ "source": "7", "target": "8"},
{ "source": "1", "target": "5"},
{ "source": "2", "target": "6"},
{ "source": "3", "target": "7"},
{ "source": "4", "target": "8"}
]
};
// state variable for current link set
var firstLinks = true;
// svg and sizing
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// d3 color scheme
var color = d3.scaleOrdinal(d3.schemeCategory10);
// elements for data join
var link = svg.append("g").selectAll(".link"),
node = svg.append("g").selectAll(".node");
// simulation initialization
var simulation = d3.forceSimulation()
.force("link", d3.forceLink()
.id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody()
.strength(function(d) { return -500;}))
.force("center", d3.forceCenter(width / 2, height / 2));
// button event handling
d3.select("#switch-btn").on("click", function() {
firstLinks = !firstLinks;
update();
});
// follow v4 general update pattern
function update_local() {
// Update link set based on current state
// DATA JOIN
link = link.data(firstLinks ? graph.links1 : graph.links2);
// EXIT
// Remove old links
link.exit().remove();
// ENTER
// Create new links as needed.
link = link.enter().append("line")
.attr("class", "link")
.merge(link);
// DATA JOIN
node = node.data(graph.nodes);
// EXIT
node.exit().remove();
// ENTER
node = node.enter().append("circle")
.attr("class", "node")
.attr("r", 10)
.attr("fill", function(d) {return color(d.group);})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
)
.merge(node);
// Set nodes, links, and alpha target for simulation
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(firstLinks ? graph.links1 : graph.links2);
simulation.alphaTarget(0.3).restart();
}
// follow v4 general update pattern
function update_http() {
var new_graph_http_data = fetchNewData();
// Update link set based on current state
// DATA JOIN
link = link.data(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);
// EXIT
// Remove old links
link.exit().remove();
// ENTER
// Create new links as needed.
link = link.enter().append("line")
.attr("class", "link")
.merge(link);
// DATA JOIN
node = node.data(new_graph_http_data.nodes);
// EXIT
node.exit().remove();
// ENTER
node = node.enter().append("circle")
.attr("class", "node")
.attr("r", 10)
.attr("fill", function(d) {return color(d.group);})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
)
.merge(node);
// Set nodes, links, and alpha target for simulation
simulation
.nodes(new_graph_http_data.nodes)
.on("tick", ticked);
simulation.force("link")
.links(firstLinks ? new_graph_http_data.links1 : new_graph_http_data.links2);
simulation.alphaTarget(0.3).restart();
}
// drag event handlers
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
// tick event handler (nodes bound to container)
function ticked() {
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
// Value copying function
function fetchNewData() {
var idx, tempStr;
var obj = {
"nodes": [],
"links1": [],
"links2": [],
};
for (idx in graph.nodes) {
tempStr = JSON.stringify(graph.nodes[idx]);
tempStr = JSON.parse(tempStr);
obj.nodes.push(tempStr);
}
for (idx in graph.links1) {
tempStr = JSON.stringify(graph.links1[idx]);
tempStr = JSON.parse(tempStr);
obj.links1.push(tempStr);
}
for (idx in graph.links2) {
tempStr = JSON.stringify(graph.links2[idx]);
tempStr = JSON.parse(tempStr);
obj.links2.push(tempStr);
}
if(simulation.nodes().length) {
var old = simulation.nodes()
obj.nodes.forEach(function(node,i) {
node.x = old[i].x;
node.y = old[i].y;
node.vx = old[i].vx;
node.vy = old[i].vy;
})
}
return obj;
}
</script>
</html>
关于javascript - .data() 处的 D3 新数据使 svg 重绘而不是更新节点位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65810037/
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
我试图用这种形式简单地获取数字 28 integer+space+integer+integer+space+integer我试过这个正则表达式 \\s\\d\\d\\s 但我得到了两个数字11 和
最近一直在学习D语言。我一直对运行时感到困惑。 从我能收集到的关于它的信息中,(这不是很多)我知道它是一种有助于 D 的一些特性的运行时。像垃圾收集一样,它与您自己的程序一起运行。但是既然 D 是编译
想问一下这两个正则表达式有区别吗? \d\d\d 与 \d{3} 我已经在我的本地机器上使用 Java 和 Windows 操作系统对此进行了测试,两者都工作正常并且结果相同。但是,当在 linux
我正在学习 Go,而且我坚持使用 Go 之旅(exercise-stringer.go:https://tour.golang.org/methods/7)。 这是一些代码: type IPAddr
我在Java正则表达式中发现了一段令我困惑的代码: Pattern.compile( "J.*\\d[0-35-9]-\\d\\d-\\d\\d" ); 要编译的字符串是: String string
我在 ruby 代码上偶然发现了这个。我知道\d{4})\/(\d\d)\/(\d\d)\/(.*)/是什么意思,但是\1-\2-\3-\4 是什么意思? 最佳答案 \1-\2-\3-\4 是 b
我一直在努力解决这个问题,这让我很恼火。我了解 D 运行时库。它是什么,它做什么。我也明白你可以在没有它的情况下编译 D 应用程序。就像 XoMB 所做的那样。好吧,XoMB 定义了自己的运行时,但是
我有两个列表列表,子列表代表路径。我想找到所有路径。 List> pathList1 List> pathList2 当然是天真的解决方案: List> result = new ArrayList>
我需要使用 Regex 格式化一个字符串,该字符串包含数字、字母 a-z 和 A-Z,同时还包含破折号和空格。 从用户输入我有02-219 8 53 24 输出应该是022 198 53 24 我正在
目标是达到与this C++ example相同的效果: 避免创建临时文件。我曾尝试将 C++ 示例翻译为 D,但没有成功。我也尝试过不同的方法。 import std.datetime : benc
tl;dr:你好吗perfect forwarding在 D? 该链接有一个很好的解释,但例如,假设我有这个方法: void foo(T)(in int a, out int b, ref int c
有什么方法可以在 D 中使用abstract auto 函数吗? 如果我声明一个类如下: class MyClass { abstract auto foo(); } 我收到以下错误: mai
有没有人为内存中重叠的数组切片实现交集?算法在没有重叠时返回 []。 当 pretty-print (使用重叠缩进)内存中重叠的数组切片时,我想要这个。 最佳答案 如果您确定它们是数组,那么只需取 p
我已经开始学习 D,但我在使用 Andrei Alexandrescu 所著的 The D Programming Language 一书中提供的示例时遇到了一些麻烦。由于 int 和 ulong 类
如何创建一个不可变的类? 我的目标是创建一个实例始终不可变的类。现在我只是用不可变的方法和构造函数创建了一个“可变”类。我将其称为 mData,m 表示可变。然后我创建一个别名 alias immut
不久前我买了《The D Programming Language》。好书,很有教育意义。但是,我在尝试编译书中列出的语言功能时遇到了麻烦:扩展函数。 在这本书中,Andrei 写了任何可以像这样调用
我在 D http://www.digitalmars.com/d/2.0/lazy-evaluation.html 中找到了函数参数的惰性求值示例 我想知道如何在 D 中实现可能的无限数据结构,就像
这个问题在这里已经有了答案: 12 年前关闭。 Possible Duplicate: Could anyone explain these undefined behaviors (i = i++
当前是否可以跨模块扫描/查询/迭代具有某些属性的所有函数(或类)? 例如: source/packageA/something.d: @sillyWalk(10) void doSomething()
我是一名优秀的程序员,十分优秀!