Drop down menu 如何使用D3中的下拉列表为绘制折线图的数据集子集？

我尝试使用一个下拉列表，允许用户选择一个类别，然后D3SVG将根据所选项目子集主列表，绘制与该类别相关的几行图表。我原来有一个无序的列表，上面有漂亮的正方形，当用户单击一行中的任意位置时，图表将使用所选类别进行更新：

function select_category(data_key) {
  "use strict";
  var key_items = d3.select('.d3_curve-key')
    .selectAll('div')
    .data(data_key)
    .enter()
    .append('div')
    .attr('class', 'd3_curve-key_line')
    .attr('id', function(d) {return d.category_id + "_key";} )
    ;
  key_items.append('div')
    .attr('id', function(d) {
      return 'd3_curve-key_square_' + d.category_id;
      })
    .attr('class', function(d) {
      return 'd3_curve-key_square ' + d.category_id;
      })
    ;
  key_items.append('div')
    .attr('class', 'd3_curve-key_label')
    .text( function(d) {return d.category_name;} )
    ;
  d3.selectAll('.d3_curve-key_line')
    .on('click', get_category_data)
    ;
}

function get_category_data(data_key,i){
  var selected_id = data_key.category_id;
  var ts = d3.select('#'+selected_id);
  d3.json(
    "/category_details.json",
    function(data) {
      filtered_data = data.filter( function(d) {
        return d.category_id === selected_id;})
        ;
      draw_percentiles(filtered_data, selected_id);
      }
    );
}

function draw_percentiles(line_data, line_id){
  // SVG commands.
  .
  .
  .
}

现在我尝试使用下拉列表并传递相同的数据和子集参数，但由于某种原因，所选类别（以及数据集）的参数没有传递到绘图函数：

var selection_drop_down = d3.select('#d3_curve-selection_area')
  .append('select')
    .on('change', get_category_data)
  .selectAll('option')
  .data(data_key)
  .enter()
  .append('option')
    .attr('class', 'd3_curve-selection_area-drop_down_list')
    .attr('id', function(d) {return d.category_id + "_key";} )
    .attr('value', function(d) {return d.category_id;} )
    .text( function(d) {return d.category_name;} ) 
  ;

下拉列表显示正确，但未向get_category_data函数传递任何内容

---

有人有什么想法/建议吗？提前谢谢你

调用函数get\u category\u data时未向其传递任何参数

由于get_category_数据似乎不使用此处的索引变量，因此您可能不需要更改

var selected_id = data_key.category_id;

到

将函数的定义从

function get_category_data(data_key,i){

到

这个答案也可能有帮助：

---

不确定您正在使用的D3库的版本。您的d3.json回调签名属于d3 v2类型。如果您使用的是D3V3，则需要对其进行更改：目前我使用的是v2。但是感谢大家对新版本的关注！

function get_category_data(data_key,i){

function get_category_data(){