Javascript D3.js尝试实现可排序SVG表

正如我的标题所述，我正在尝试实现一个具有良好转换的交互式表，这就是为什么我选择D3.js与SVG元素相结合

我设法用普通HTML元素（th、tr、td）实现了一个可排序表：

正如您所看到的，当单击header元素时，表会正确地对数据进行排序。 基于上表，我开始实现此表的svg版本，这就是我到目前为止的进展：

我目前无法解决的问题是排序不太有效。单击标题时会发生一些事情，但行的排序不正确。 我觉得非常奇怪的是，在浏览器中检查html元素时，g.row元素根据绑定到它们的数据正确排序

我认为我的排序函数没有问题，因为我在两个表中使用相同的函数。 我猜新排序的行没有输入正确的单元格，但我不知道如何解决这个问题

编辑： 好的，我成功地将单元格中的文本更新为新的排序顺序。更正后的代码位于JSFIDLE上，也在此处编辑。 但还有一个问题我不明白：

行到新位置的转换与绑定到行的新排序数据不匹配。例如，当多次单击“id”时，您将看到我的意思。 我用来转换到新位置的参数“i”是否可能不代表新排序的顺序？ 我发现这个示例与我的示例类似，并且转换工作正常：

http://examples.oreilly.com/0636920026938/chapter_10/10_delay.html （抱歉，目前不能发布超过2个链接）

---

我的代码中的错误在哪里？

在此页面上找到了我的问题的解决方案：

问题是缺少将数据正确绑定到行的键函数

通过更改此行：

var rows = rowsGrp.selectAll("g.row").data(jsonData);

到

以及在转换后删除单元格更新：

//update cells
rows.selectAll("g.cell").select("text").text(String);

---

表现在可以正确排序和转换。

我不确定SVG是否比HTML更适合于表。对于大多数文本，HTML更方便。是一个带有转换的可排序HTML表的示例。这可能是对的，但我计划与该表进行更多的交互，而不仅仅是排序，我认为使用svg可以获得更好的动画效果。但感谢您提供的示例，当我经常使用svg方法时，我会重新考虑使用HTML；）

var rows = rowsGrp.selectAll("g.row").data(jsonData);

var rows = rowsGrp.selectAll("g.row").data(jsonData, 
    function(d){ return d.id; });

//update cells
rows.selectAll("g.cell").select("text").text(String);