基于用户's <select>更新/切换/过滤条形图

Update/toggle/filter bar graph based on user's <select>

本文关键字：更新 select 切换 条形图 过滤 用户 于用户      更新时间：2023-09-26

使用d3.js我想构建一个交互式条形图，允许用户基于多个数据集可视化/过滤数据。

假设我的数据集显示了五家公司及其子公司的不同数据，总数总是达到100。即:

index.tsv:
Company    Births   Deaths 
A          10       90
B          15       85
C          1        99
D          8        92
E          7        93
equality.tsv:
Company    Women    Men
A          45       55
B          70       30
C          90       10
D          50       50
E          7        93
equality_daughter.tsv:
Company    Women    Men
A          45       55
B          70       30
C          90       10
D          50       50
E          7        93
salary.tsv:
Company    High salary  Low salary
A          45           55
B          70           30
C          90           10
D          50           50
E          7            93
salary_daughter.tsv:
Company    High salary  Low salary
A          45           55
B          70           30
C          90           10
D          50           50
E          7            93

我希望用户通过两步选择要可视化的数据集:平等还是薪水?2. 主公司还是子公司?我(想?)我可以使用以下命令完成部分工作:

<select>
  <option value="index">Home</option>
  <option value="equality">Gender equality</option>
  <option value="salary">The Money</option>
</select>

当用户选择Home时，我想要显示索引的条形图，等等。

我基本上是在寻找最简单的方法来完成这个。我正在考虑使用ajax来获取基于选择的数据:

var url = "data/" + option.this + ".tsv";
                            $.ajax({
                                cache: true,
                                dataType: "text",
                                url: url
                            })

但不确定这是否是最好的方法。另外，作为一个新手，我不知道如何将这个和d3结合起来，所以它会在变化时更新图表。这个设置:http://www.theguardian.com/sport/interactive/2013/jan/30/nfl-salaries-team-position#philadelphia-eagles,buffalo-bills显示了我正在寻找的函数的几个不同版本。

所以，我基本上是在寻找任何指针(即什么要读)和建议/解决方案。

d3有一个内置的方法来获取和解析TSV文件:d3.tsv() .

这个函数接受一个文件路径作为它的主要参数

d3.tsv('path/to/your/file.tsv')

你可以指定一个回调函数作为第二个参数…

d3.tsv('path/to/your/file.tsv', function(error, rows) {
  // code to make chart goes here...
  // parsed tsv data is now an Array of Objects named 'rows'
  //  with each Array element representing one row of tsv data
});

…或者您可以使用.get方法来指定回调。

d3.tsv('path/to/your/file.tsv').get(function(error, rows) {
  // same as above
});

API还允许传递一个额外的函数，它是访问器函数。该函数将对每行tsv数据运行一次，并允许您对传入的数据进行调整，例如更改日期或数字的格式。要指定一个访问器函数，可以在d3.tsv中添加一个中间参数(使回调函数成为第三个参数)…

d3.tsv('path/to/your/file.tsv', function(d) {
  // this is the accessor
  //  'd' is an Object representing a single row of tsv data
  // this function should return an Object
}, function(error, rows) {
  // this is the callback
});

…或者您可以使用.row方法来指定访问器。

d3.tsv('path/to/your/file.tsv')
  .row(function(d) {
    // accessor function
  })
  .get(function(error, rows) {
    // callback function
  });

要在您的示例中使用select实现这一点，您将需要添加一个事件侦听器，以便在更改选择时运行一些代码。因为看起来您使用的是jQuery，所以这应该非常简单。首先，向select元素添加一个ID，以便可以直接访问它。像这样的代码应该可以达到这个效果:

<select id="select-data">
  <option value="index">Home</option>
  <option value="equality">Gender equality</option>
  <option value="salary">The Money</option>
</select>
JavaScript

// this runs when the select is changed
$('#select-data').change(function() {
  // store the selected value in a variable
  var selected = $(this).find('option:selected').val();
  // now use the selection to fetch the correct data file
  d3.tsv('path/to/' + selected + '.tsv')
    .row(function(d) {
      // accessor function
    })
    .get(function(error, rows) {
      // call your render of the chart using the new data from here
    });
});

你可以阅读更多关于这个的API在这里。

相关文章：