Question

我正在尝试构建一个表格，我可以使用复选框过滤我的数据。基本上我有一个包含Authorname的列和另一个包含Linkclicks的列。我希望能够通过只选择一位作者来更新我的表格。对于测试，我只构建了一个复选框：

<label><input type="checkbox" name="authorfilter" class="author_nd" value="Juliette Geenens" checked="checked"/> Juliette Geenens</label>

我也知道我需要这行代码才能根据复选框事件应用我的过滤器：

d3.selectAll(".author_nd").on("change", function() {
    var type = this.value;
    if (this.checked) { 
        var filtereddata = people.filter(function(d){ return d.authorname == type;});
    } 
});

但是，我不知道应该把这些代码放在哪里......我是D3的新手，我仍然不太了解数据如何从函数转移到变量等等。 ..

以下是我的全部代码：

<!DOCTYPE html>
<html lang="en">
<head>

<script src="https://d3js.org/d3.v3.min.js"></script>

<style>
    td, th {
    padding: 2px 4px;
}

th {
    font-weight: bold;
}   
</style>

</head>

<body>

    <div id="container">

 <script>   


var table = d3.select("#container").append("table");
var thead = table.append("thead");
var tbody = table.append("tbody");

// append the header row
thead.append("tr")
  .selectAll("th")
  .data(["authorname", "linkclicks"])
  .enter()
  .append("th")
  .text(function(column) { return column; })

function update(data) {
  var transformedData = d3.nest()
    .key(function(d) { return d.authorname;})
    .rollup(function(d) { return d3.sum(d, function(g) {return g.linkclicks;}); })
    .entries(data);

  var tr = tbody
    .selectAll("tr")
    .data(transformedData)
    .enter()
    .append('tr')
    .sort(function(a, b) {
      return d3.descending(a.values, b.values)
    });

  tr
    .append('td')
    .text(function(d) { return d.key; });
  tr
    .append('td')
    .text(function(d) { return d.values;})
};


var url = 'data.json';

d3.json(url, function(error, people) {
if (error) {
throw error;}
update(people);});


</script>
</div>
</body>

</html>

Answer 1

由于people仅存在于JSON函数中，因此请尝试将代码放入其中：

d3.json(url, function(error, people) {
  if (error) {
    throw error;}
  update(people);

d3.selectAll(".author_nd").on("change", function() {
  var type = this.value;
  if (this.checked) { 
    var filtereddata = people.filter(function(d){ return d.authorname == type;});
    update(filtereddata);
  }
});

});

问题是，在没有看到您的数据的情况下，我不知道d3.nest将会做什么，并且可能会返回错误。

使用带有D3.js的表的复选框过滤数据

1 个答案: