d3js - 如何按顺序插入东西？

Question

说我想要一个排序数组的排序名称的HTML列表。

大多数涉及排序的d3.js示例都是通过根据排序顺序定位任意排序的节点。但我需要按顺序创建节点。

下面是一个问题的例子（如jsfiddle）。

var d = ['fred', 'wilma']; 
draw(d); // Gives list with 2 li elements, fred, wilma 

d.unshift('barney'); 
draw(d); // Gives 3 elements, fred, wilma, barney 

function draw(d) { 
    lis = d3.select('ul').selectAll('li').data(d, identity); 
    lis.enter().append('li').text(identity); 
} 

// just handy 
function identity(d){return d;}; 

的这个输出是一个列表：弗雷德，威尔玛，巴尼但我想要的清单巴尼，弗雷德，威尔玛。

我明白为什么这个代码做这个（我只是用追加的容器上，所以新项目总是在最后），但有一个奇特的d3js的方式来保存数据的列表的顺序？

Answer 1

当您对数组进行任何更改时，必须重绘整个视图。当你使用unshift来添加一个元素时，它会被添加为数组的第一个元素，但它不是再次重新绘制整个数组，而只是在最后添加新元素:)这里是你可以尝试的代码。

var d = ['fred', 'wilma']; 

// Gives list with 2 li elements, fred, wilma 
draw(d); 

// prepend an element to our sorted list and redraw. 
window.setTimeout(function() { 
    d.unshift('barney'); 
    draw([""]); // Removing previous array to redraw. 
    draw(d); 
    console.log(d); // Print array order in console. 
}, 1000); 


function draw(d) { 
    lis = d3.select('ul').selectAll('li').data(d, identity); 
    lis.enter().append('li') 
     .text(identity) 
     .style({height:'0', overflow:'hidden'}) 
     .transition().duration(1000).style({height:'2rem'}); 
    lis.exit().remove(); // Removing previous array to redraw. 
} 

// handy 
function identity(d){return d;}; 

Answer 2

那么，事实证明这是相当无足轻重！

添加数据后，只需致电.order()即可。下面:)

var d = ['fred', 'wilma']; 
draw(d); // Gives list with 2 li elements, fred, wilma 

d.unshift('barney'); 
draw(d); // Gives 3 elements, fred, wilma, barney 

function draw(d) { 
    lis = d3.select('ul').selectAll('li').data(d, identity); 
    lis.enter().append('li').text(identity); 
    lis.order(); 
} 

// just handy 
function identity(d){return d;}; 

http://jsfiddle.net/emgjh0j7/1/