d3.ClickAndSort.20182244

I sorted the list with d3.js.

by ytyaru

HTML

<script src="http://d3js.org/d3.v4.min.js"></script>
<p>Click the list to reverse the order.</p>
<table>
  <tr><th>Library</th><th>License</th><th>Copyright</th></tr>
  <tr><th><a href="https://d3js.org/">d3.js</a></th><th><a href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause</a></th><th><a href="https://github.com/d3/d3/blob/master/LICENSE">Copyright 2010-2016 Mike Bostock</a></th></tr>
</table>

CSS

p {
  font-size: 14px;
}
a,td,th {
  font-size: 10px;
}

JavaScript

var ary = [1, 2, 3, 4, 5];
var nowSort = d3.descending; // d3.ascending
d3.select("body").insert("ul", ":first-child");
transform();

function transform()
{
  reverse();
  d3.selectAll("li").enter().remove();
  nodes = d3.select("body").select("ul").selectAll("li");
  nodes
    .data(ary)
    .enter()
    .append("li")
    .on("click", function(d,i) { transform(); })
    .text(function(d) {return d;});
  nodes
    .data(ary)
    .exit().remove();
  nodes.text(function(d) {return d;});
}
function reverse()
{
  if (nowSort == d3.ascending) {
    ary.sort(d3.descending);
    nowSort = d3.descending;
  } else {
    ary.sort(d3.ascending);
    nowSort = d3.ascending;
  }
}