Question

使用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

我希望用户选择数据集以分两步进行可视化：1。平等还是薪水？ 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显示了我正在寻找的几个不同版本的功能。

所以，我基本上都在寻找任何指针（即阅读内容）和建议/解决方案。

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

要在您的情况下实现这一点，使用select，您将需要添加一个事件侦听器，以便在更改选择时运行某些代码。因为看起来你正在使用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
    });
});

您可以阅读有关此here的API的更多信息。我希望有所帮助。

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

1 个答案: