Javascript 在动态变化的d3 vis中，如何根据svg元素的数据值重新排列它们的DOM顺序？

我有一个json数据集，我以类似于使用

d3.js

库的方式动态可视化它

但是，我希望将图表中位置更改为较低位置的条形图位于较高位置的条形图的“后面”。为此，我想根据数据设置一个z索引（值较低的条的z索引较低，因此位于值较大的条的后面）。不幸的是，SVG使用文档顺序作为z索引，这就是为什么每次图表更改时我都需要对文档中的条（示例中的

chartRow

变量）重新排序的原因

---

有什么方法可以实现这个目标吗？

重新排序DOM中的元素

要使用d3对DOM中的元素重新排序，可以使用和：

Selection.sort根据绑定数据对选择进行排序，

a

和

b

分别表示绑定到单个元素的数据。生成的行为本质上与Array.sort相同，但不是使用数组，而是使用绑定数据对选择中的元素进行排序。提供给selection.sort（比较功能）的函数内容决定排序顺序：

比较函数（默认为升序）传递两次 要比较的元素数据a和b。它应该返回负数， 正值或零值。如果是负数，那么a应该在b之前；如果 正，那么a应该在b之后；否则，将考虑a和b 相等，顺序是任意的。（）

一旦我们有了一个排序的选择，我们就可以应用

selection.order（）

，它根据选择的顺序将每个元素重新插入DOM。请记住，先绘制的元素可以被稍后绘制的元素覆盖-选择中的“第一”意味着可能在所有元素的下面

---

因此，如果我们有类似的情况，重叠条是根据数据数组的顺序顺序绘制的：

var条=[
{value:100}，
{value:50}，
{value:200}，
{value:70}，
{value:40}，
{值：120}
];
var高度=200；
var宽度=500；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“高度”，高度）
.attr（“宽度”，宽度）；
var bar=svg.selectAll（“rect”）
.数据（条）
.输入（）
.append（“rect”）
.attr（“宽度”，45）
.attr（“高度”，函数（d）{返回d.value；}）
.attr（“y”，函数（d）{返回高度-d.value；}）
.attr（“x”，函数（d，i）{返回i*30+50；}）
.attr（“fill”，函数（d，i）{返回d3.schemeCategory10[i]；}）
.attr（“笔划”、“黑色”）
.attr（“笔划宽度”，1）；
//订购酒吧：
条。排序（函数（a，b）{
返回b.value-a.value；
}).order（）
在svg中，您可能希望使用
appendChild
而不是使用z-index，就像您在这个代码笔示例中看到的那样：
// Sort & then order:
selection.sort(function(a,b) {
  return a.property - b.property; 
})
.order();