1

ユーザーがカテゴリを選択できるドロップダウンリストを使用しようとしています。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関数には何も渡されていません。

誰かアイデア/提案がありますか？前もって感謝します！

4

1 に答える 1

0

関数 get_category_data は、引数が渡されずに呼び出されています。

ここから get_category_data がインデックス変数を使用しているようには見えないので、おそらく変更することで逃げることができます

var selected_id = data_key.category_id;

に

var selected_id = this.category_id;

関数の定義をから変更します

function get_category_data(data_key,i){

に

function get_category_data(){

この回答も役立つかもしれません： d3.jsを使用してドロップダウンメニューを追加する

于 2013-01-20T04:51:06.930 に答える