Title: Sort Div Whit d3js html5
Tags: jquery;css;html;sorting;d3.js
Question: I am try to sort div animated with d3js, this is the code example

the problem is, in the function reSort, I try to get the div.data and apply sort function but the element a and b has arrived undefined, I dont know why

```  <!doctype html&gt;
  <html&gt;
      <head&gt;
          <meta charset="utf-8"&gt;
          <style type="text/css"&gt;
          .resort {
          padding: 10px;
          border: 1px solid black;
          background: #ccc;
          cursor: pointer;
          width: 100px;
          margin-bottom: 20px;
          }
          .data {
          position: fixed;
          border: 1px solid black;
          width: 100px;
          }
          </style&gt;
      </head&gt;
      <body&gt;
          <div class="resort"&gt;Re-sort</div&gt;
          <script src="http://d3js.org/d3.v3.min.js"&gt;</script&gt;
          <script type="text/javascript"&gt;
          ;(function() {
            body = d3.select(" body ");

            function reSort() {
              body.selectAll("div.data").sort(function(a, b) {
              console.log(a); // data Arrived undefined
              console.log(b); // data Arrived undefined
              // I think a and b should return the component <div class="data"&gt;</div&gt; 
              return d3.descending(a.id, b.id);;
            })
            .transition().duration(500)
            .style({
            top: function(d, i) {
            return 60 + ((i*30)) + "px";
           }
          })
          }
          d3.select(".resort").on("click", reSort);
          }());
          </script&gt;
          <div class="data" id="1" style="top: 60px;"&gt;0</div&gt;
          <div class="data" id="2" style="top: 90px;"&gt;1</div&gt;
          <div class="data" id="3"  style="top: 120px;"&gt;2</div&gt;
          <div class="data" id="4"  style="top: 150px;"&gt;3</div&gt;
          <div class="data" id="5"  style="top: 180px;"&gt;4</div&gt;
          <div class="data" id="6"  style="top: 210px;"&gt;5</div&gt;
          <div class="data" id="7"  style="top: 240px;"&gt;6</div&gt;
          <div class="data" id="8"  style="top: 270px;"&gt;7</div&gt;
          <div class="data" id="9"  style="top: 300px;"&gt;8</div&gt;
          <div class="data" id="10" style="top: 330px;"&gt;9</div&gt;
      </body&gt;
  </html&gt;
```

thanks for any help..


Here is the accepted answer: According to the documentation

```
  The comparator function, which defaults to d3.ascending, is passed two elements' data a and b to compare.
```

Your comparator function tries to operate on the parameters a and b as if they were dom nodes. Instead, these parameters represent data bound to the corresponding nodes. You need to bind your data to each individual node to have it handed down to the comparator. Binding of the node's id could be easily achieved by applying

```body.selectAll("div.data")
  .datum(function() { return +this.id; })
```

I've put together a working snippet:



```;
(function() {
  body = d3.select("body");

  function reSort() {
    body.selectAll("div.data")
      .datum(function() { return +this.id; })
      .sort(function(a, b) {
        return d3.descending(a,b);
      })
      .transition().duration(500)
      .style({
        top: function(d, i) {
          return 60 + ((i * 30)) + "px";
        }
      });
  }
  d3.select(".resort").on("click", reSort);
}());```
```.resort {
  padding: 10px;
  border: 1px solid black;
  background: #ccc;
  cursor: pointer;
  width: 100px;
  margin-bottom: 20px;
}
.data {
  position: fixed;
  border: 1px solid black;
  width: 100px;
}```
```<!DOCTYPE html&gt;
<html&gt;

  <head&gt;
    <link rel="stylesheet" href="style.css"&gt;
    <script src="http://d3js.org/d3.v3.min.js"&gt;</script&gt;
  </head&gt;

<body&gt;
    <div class="resort"&gt;Re-sort</div&gt;
    <div class="data" id="1" style="top: 60px;"&gt;0</div&gt;
    <div class="data" id="2" style="top: 90px;"&gt;1</div&gt;
    <div class="data" id="3" style="top: 120px;"&gt;2</div&gt;
    <div class="data" id="4" style="top: 150px;"&gt;3</div&gt;
    <div class="data" id="5" style="top: 180px;"&gt;4</div&gt;
    <div class="data" id="6" style="top: 210px;"&gt;5</div&gt;
    <div class="data" id="7" style="top: 240px;"&gt;6</div&gt;
    <div class="data" id="8" style="top: 270px;"&gt;7</div&gt;
    <div class="data" id="9" style="top: 300px;"&gt;8</div&gt;
    <div class="data" id="10" style="top: 330px;"&gt;9</div&gt;
    <script src="script.js"&gt;</script&gt;
</body&gt;
</html&gt;```






{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:03/27/15', 'FavoriteCount': 0.0, 'PostTypeId': 1, 'Tags': '<jquery><css><html><sorting><d3.js>', 'Title': 'Sort Div Whit d3js html5', 'ViewCount': 360, 'id': 29309901, 'user_AboutMe': None, 'user_AccountId': 2837015.0, 'user_DisplayName': 'Daniel Arenas', 'user_Reputation': 475.0, 'user_Views': 43.0, 'user_id': 2437427.0}}