javascript - 根据用户的 <select> 更新/切换/过滤条形图

Question

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

假设我的数据集显示有关 5 家公司及其子公司的不同数据，总计始终为 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

我希望用户分两步选择要可视化的数据集:1.平等还是工资？ 2. 母公司还是子公司？我(认为？)我可以使用以下方法完成其中一些任务:

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

因此，当用户选择“主页”时，我希望显示索引的条形图，等等。

我基本上正在寻找最简单的方法来实现这一目标。我正在考虑使用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显示了我正在寻找的函数的几个不同版本。

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

Answer 1

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

---

要在您的情况下实现这一点，使用选择，您将需要添加一个事件监听器以在选择更改时运行一些代码。因为看起来您正在使用 jQuery，所以这应该很简单。首先，向 select 元素添加一个 ID，以便您可以直接访问它。像这样的事情应该可以解决问题:

HTML

<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 的更多信息 here 。我希望这会有所帮助。