Question

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

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); });

D3稳定排序模拟

1 个答案: