D3稳定排序仿真

Question

我试图使用d3.selection.sort()函数来模拟一个稳定的排序。对于每个数据成员，我有两个div，我想主要根据数据的时间属性进行排序，然后按照我添加到div中的类进行排序。但是，由于d3 .排序函数只是传递数据(如果我错了请纠正我)，所以我无法有效地访问类(我可以再次d3选择，但这将非常无效)。相反，我尝试在添加类时动态地向数据添加一个属性，以便以后可以在排序中使用它。但是，我在正确绑定数据时遇到了问题，当我在一个选择中更改数据时，它在绑定到该数据成员的所有元素中都会发生变化。

enterSelect = d3.selectAll('div').data(dates).enter();

enterSelect.append('div').attr('class', function(d) { d.sort = 1; return "class_1"})
enterSelect.append('div').attr('class', function(d) { d.sort = 2; return "class_2"})

main.selectAll('div').sort(function(a,b) { return d3.ascending(a.date, b.date) || d3.ascending(a.sort, b.sort)});

但是到目前为止，所有元素都有d.sort == 2，任何关于如何解决这个问题的想法。谢谢!

编辑:所以最后我想要

<div class=1> data[0] </div>
<div class=2> data[0] </div>
<div class=1> data[1] </div>
<div class=2> data[1] </div>
<div class=1> data[2] </div>
<div class=2> data[2] </div>

我开始的时候

<div class=1> data[0] </div>
<div class=1> data[1] </div>
<div class=1> data[3] </div>
<div class=2> data[0] </div>
<div class=2> data[1] </div>
<div class=2> data[2] </div>

其中，每个数据元素还具有一个.date属性以进行排序。然后我想在课堂上进行二次排序，或者以某种方式模拟。谢谢!

Answer 1

用JQuery实现解决方案

    var myList = $('div.displayTimeline');
    var listItems = myList.children('div').get(); 
    listItems.sort(function(a, b) {
       var dateA = formatTime.parse($(a).data('id'));
       var dateB = formatTime.parse($(b).data('id'));
       var sortA = $(a).data('sort')
       var sortB = $(b).data('sort')
       return (dateA < dateB) ? -1 : (dateA > dateB) ? 1 : 
                ((sortA < sortB) ? -1 : (sortA > sortB) ? 1 : 0);
    })
    $.each(listItems, function(idx, itm) { myList.append(itm); });