CSV中带有d3的静态标题和滚动html表

Question

I am able to generate html table with d3 from csv (with conditional insertion of data in particular column) as below: 我能够从csv（在特定列中有条件地插入数据）使用d3生成html表，如下所示：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    table { border-collapse: collapse; color: #333; background-color: #F7F6F3; }
    table thead { font-weight: bold; background-color: #CCC; cursor: default; }
    table tbody tr:hover { background-color: #FFC; }
    td { border: solid 1px #CCC; padding: 0 1ex; }
    .even { color: #284775; background-color: White; }
    .left { text-align: left; }
    .right { text-align: right; }
    .add { color: green; }
    .minus { color: red; }
  </style>
</head>

<body>
  <div id="table"></div>
  <script>
    var table = d3.select("#table").append("table"),
        thead = table.append("thead"),
        tbody = table.append("tbody");
    thead.append("th").text("Title");
    thead.append("th").text("Data Change");

    d3.csv("data.csv", function(error, data) {
      if (error) throw error;
      var tr = tbody.selectAll("tr")
            .data(data)
        .enter().append("tr")
            .classed("even", function(d, i) { return i % 2 == 1; });
      tr.each(function(d) {
        var self = d3.select(this);
        self.append("td")
            if (a.Title === "CONDITION") {return "red"}  // <== Add these
                      else { return "black" }
            .append("a")
                .attr("href", d.URL)
                .text(d.Title);
        self.append("td")
            .html(d["Data Change"]);
      });
    });
  </script>
</body>

However, I am not able to make STATIC headers with scrollable body with d3. 但是，我无法使用d3制作带有可滚动正文的STATIC标头。 Can anyone please help here? 谁能帮忙吗？

Answer 1

I'm not so sure d3js is the best for this, but I managed to implement what you wanted here: https://codepen.io/anon/pen/rrLVpv?editors=0010 我不确定d3js对此是否是最好的，但是我设法在这里实现了您想要的： https ://codepen.io/anon/pen/rrLVpv?editors=0010

The scrolling part is a bit hacky because I couldn't figure out how to reverse the scrolling, so instead of looking around more for a good solution (because I'm lazy) I used the deltaY of the scroll event: 滚动部分有点笨拙，因为我无法弄清楚如何反转滚动，因此，我没有再四处寻找好的解决方案（因为我很懒惰），而是使用了scroll事件的deltaY：

var scrollEvent = d3.behavior.zoom()
                    .on('zoom', function (e) { 
                      var scrollDirection = (d3.event.sourceEvent.deltaY > 0) ? 1 : -1;
                      startPos += (scrollDirection > 0 && startPos + increment < allData.length) ? scrollDirection 
                                  : (scrollDirection < 0 && startPos + increment > increment) ? scrollDirection
                                  : 0;
                      updateTable();
                    });

Anyone know a better way to achieve this? 有人知道实现此目标的更好方法吗？ Originally I just reversed the array and basing the startPos off the zoom scale, but this was causing problems with the zoom increment. 最初，我只是反转数组并将startPos置于缩放比例之外，但这会导致缩放增量问题。

Anyway, to achieve the scrolling functionality you wanted I firstly loaded the data, generated the table head and body based off of the data, and then attached the scroll behaviour to the table body. 无论如何，要实现所需的滚动功能，我首先要加载数据，然后根据数据生成表头和表体，然后将滚动行为附加到表体。 I then sliced the data array to only contain the first 10 values (look at the 'startPos' and 'increment' variables) and populated the table based off of this sliced array. 然后，我将数据数组切片为仅包含前10个值（请查看“ startPos”和“ increment”变量），然后基于此切片数组填充表。 Everytime someone scrolls on the body of the table it updates the table with the 'updateTable' function. 每当有人在表的主体上滚动时，它都会使用“ updateTable”功能更新该表。

Full code: 完整代码：

var keys, 
    allData, 
    currentData,
    startPos = 0,
    increment = 10;

var scrollEvent = d3.behavior.zoom()
                    .on('zoom', function (e) { 
                      var scrollDirection = (d3.event.sourceEvent.deltaY > 0) ? 1 : -1;
                      startPos += (scrollDirection > 0 && startPos + increment < allData.length) ? scrollDirection 
                                  : (scrollDirection < 0 && startPos + increment > 10) ? scrollDirection
                                  : 0;
                      updateTable();
                    });

var table = d3.select("#table").append("table")
    thead = table.append("thead"),
    tbody = table.append("tbody").call(scrollEvent);

d3.csv("https://gist.githubusercontent.com/enjalot/1525346/raw/c4603a8d7dedc7e8c8f705ca8252a335b49e03dc/prices.csv", function(error, data) {
  if (error) throw error;

  keys     = Object.keys(data[0]),
  allData  = data;

  thead.append('tr')
    .selectAll('th')
    .data(keys).enter()
    .append('th')
    .text(function (d) {
    return d;
  });

  updateTable();
});

function updateTable() {
  // Set new data based on startPos and increment.
  currentData = allData.slice(startPos, startPos + increment);

  // Delete previous rows.
  tbody.selectAll('tr').remove();

  // Create new rows.
  var tr = tbody.selectAll("tr")
                .data(currentData).enter()
                .append("tr")
                .classed("even", function(d, i) {
                  return i % 2 == 1; 
                });

      tr.selectAll('td')
        .data(function (d) { 
          return keys.map(function (e) {
            return { 
              key: e,
              value: d[e]
            }
          });
        }).enter()
        .append('td')
        .text(function (d) { 
          return d.value; 
        });
}

Note: 注意：

This doesn't work for the scroll wheel event, you'll have to add that on/disable it if you want it/don't want it. 这对于滚轮事件不起作用，如果需要/不需要，则必须将其添加/禁用。
CSV in the codepen is from this bl.ock: http://bl.ocks.org/enjalot/1525346 . Codepen中的CSV来自以下bl.ock： http ://bl.ocks.org/enjalot/1525346。

CSV中带有d3的静态标题和滚动html表

问题描述

1 个解决方案

解决方案1
1 2018-07-17 15:28:29

CSV中带有d3的静态标题和滚动html表

问题描述

1 个解决方案

解决方案1 1 2018-07-17 15:28:29

解决方案1
1 2018-07-17 15:28:29