1

これがd3.jsの質問なのか、javascriptの可視性の質問なのかわかりません。同じイベントリスナーを異なるノードに割り当てる2つの関数があります。

function render_line(){
    var x = d3.scale.ordinal();
    ...

    d3.select("#my_line").on("click", onclick);
}

function render_bar(){
    var y= d3.scale.linear();
    ...

    d3.select("#my_bar").on("click", onclick);
}

function onclick(d,i){
    use(x,y) // error: can't access x or y
    ...
}

render_line()一方をクリックするともう一方も更新されるため、両方と同じイベントリスナー関数を共有することは理にかなっていると思いますがrender_bar()、可変スコープの問題をどのように解決するかわかりません。

4

1 に答える 1

1

関数の外部で変数を宣言してから（var関数でキーワードを使用せずに）それらに割り当てると、関数はクロージャーになり、それらの変数から値を設定および取得するためのアクセスが許可されます。

var x,y;
function foo(){
  x = d3.scale.ordinal();
  d3.select("...").on("click",onclick);
}
function bar(){
  y = d3.scale.linear();
  d3.select("...").on("click",onclick);
}
function onclick(){
  // has access to both x and y here
}

または、それがあまりにも汚い感じの場合は、イベント登録中にローカル変数の周りにクロージャを作成し、その値を共有関数に渡します。

function foo(){
  var x = d3.scale.ordinal();
  d3.select("...").on("click",function(evt){
    onclick.call(this,evt,x);
  });
}
function foo(){
  var y = d3.scale.linear();
  d3.select("...").on("click",function(evt){
    onclick.call(this,evt,y);
  });
}
function onclick(evt,scale){
  // Use 'scale' passed in
}

この場合onclick、ハンドラーに登録された関数ではないため、後で登録を解除することはできません。

于 2012-05-15T21:18:12.457 に答える