Question

我尝试用d3js对div进行排序，这是代码示例

问题是，在函数reSort中，我尝试获取div.data并应用sort函数但是元素a和b已经到达undefined，我不知道为什么

  <!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

根据文件

比较器函数默认为d3.ascending，传递两个元素＆＃39; 数据 a和b进行比较。

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

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

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

我已经整理了一个工作片段：

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

用d3js html5对Div进行排序

1 个答案: