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

这是一个列表： fred，wilma，barney 但是我想要一个列表 barney，fred，wilma 。

我理解为什么这个代码执行此操作（我只是在容器上使用append，所以新项目总是在最后），但有一种奇特的d3js方法来保持顺序数据清单？

Answer 1

嗯，事实证明它相当微不足道！

添加数据后，只需致电.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/

Answer 2

当您对阵列进行任何更改时，您必须重绘整个视图。当你使用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;};

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

2 个答案: