排序 Div Whit d3js html5

Question

我正在尝试使用 d3js 对 div 动画进行排序，这是代码示例

问题是，在函数 reSort 中，我尝试获取 div.data 并应用排序函数，但元素 a 和 b 到达时未定义，我不知道为什么

  <!doctype html>
  <html>
      <head>
          <meta charset="utf-8">
          <style type="text/css">
          .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>
      </head>
      <body>
          <div class="resort">Re-sort</div>
          <script src="http://d3js.org/d3.v3.min.js"></script>
          <script type="text/javascript">
          ;(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"></div> 
              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>
          <div class="data" id="1" style="top: 60px;">0</div>
          <div class="data" id="2" style="top: 90px;">1</div>
          <div class="data" id="3"  style="top: 120px;">2</div>
          <div class="data" id="4"  style="top: 150px;">3</div>
          <div class="data" id="5"  style="top: 180px;">4</div>
          <div class="data" id="6"  style="top: 210px;">5</div>
          <div class="data" id="7"  style="top: 240px;">6</div>
          <div class="data" id="8"  style="top: 270px;">7</div>
          <div class="data" id="9"  style="top: 300px;">8</div>
          <div class="data" id="10" style="top: 330px;">9</div>
      </body>
  </html>

感谢您的帮助..

Answer 1

根据文档

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

您的比较器函数尝试对参数 a 和 b 进行操作，就好像它们是 dom 节点一样。相反，这些参数表示绑定到相应节点的数据。您需要将数据绑定到每个单独的节点，以将其传递给比较器。通过应用

可以轻松实现节点 ID 的绑定

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

我整理了一个工作片段：

;
(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>
<html>

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

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

排序 Div Whit d3js html5

Sort Div Whit d3js html5

html

css

sorting

jquery

d3.js