Javascript 在d3中绘制数据的变更顺序

我有一些数据（

Node

s）需要绘制。这些节点可以重叠，因此绘制它们的顺序很重要（应该显示在顶部的节点需要最后绘制）

这些节点的位置和z轴可能会发生变化，这就是为什么我尝试使用一个键来模拟这种行为，该键与节点存储在其中的列表的当前索引关联

case类节点（id:Int）
def addNodesToSVG={
val sortedData:列表[节点]=？？？
val nodesSelection=d3。选择（“节点”）。选择全部（“节点”）
.data（sortedData.toJSArray，（n:节点）=>{
n、 id.toString+
//这些节点的位置可能随时间而变化
//这就是为什么我们需要在标识符中包含位置
sortedData.indexOf（n）
}
nodesSelection.enter（）.append（“g”）.attr（“类”、“节点”）/。。。
节点选择
.attr（“变换”，变换）/。。。
nodesSelection.exit（）.remove（）
}

不幸的是，这似乎并不像预期的那样有效

理论上，如果我只有两个节点（

n1

和

n2

），它们保存在

列表（n1，n2）

现在，如果我将列表更改为

List（n2，n1）

并再次调用

addNodesToSVG

，我认为会发生这种情况：

node   key
-----  ---
n2      20 // node 1 at position 0
n1      12 // node 2 at position 1

由于这些都是未知的，我认为它会删除（

nodeselection.exit（）.remove（）

）旧节点，并按正确的顺序绘制“新”节点。但是，这不会发生。为什么

---

编辑在进一步调试之后，我发现我的

退出

选择的大小始终为0。

我认为id函数应该以一致的方式使用——仅仅因为对象改变了其位置，id函数在其上的结果就不应该改变（在我看来，这是使用它的首要目的）。我将采取的方法是使id函数完全依赖于节点的id；向数据对象添加一个字段，指定呈现顺序；在合并后根据新字段对选择进行排序

正文{边距：0；位置：固定；顶部：0；右侧：0；底部：0；左侧：0；}
转换
变量d1=[{
id:'a'，
z:1，
填充：“红色”，
y:0
}, {
id:'b'，
z:2，
填充：“绿色”，
y:5
}];
变量d2=[{
id:'a'，
z:2，
填充：“红色”，
y:5
}, {
id:'b'，
z:1，
填充：“绿色”，
y:0
}]
无功电流=0；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，100）
.attr（“高度”，100）
.attr（'viewBox'，'01020'）；
函数渲染（d）{
var r=svg.selectAll（'rect'）
.data（d，函数（d）{返回d.id；}）；
r、 输入（）
.append（'rect'）
.attr（'宽度'，10）
.attr（'height'，10）
.attr（'fill'，函数（d）{返回d.fill；}）
.合并（r）
.sort（函数（r1、r2）{
如果（r1.z>r2.z）返回1；
如果（r1.z

nodesSelection.append（“g”）/…

这是什么？闻起来像是不恰当的用法是的，你是对的；我在将代码复制到SO时犯了一个错误。很抱歉，我编辑了我的问题。虽然存储有关如何绘制某物的信息似乎有点违反直觉（

z

）在我的数据模型中，这个解决方案对我有效。：）谢谢。

.sort（（r1，r2）=>r1.z-r2.z）

node   key
-----  ---
n2      20 // node 1 at position 0
n1      12 // node 2 at position 1