使用HTML範圍滑塊更新直方圖bin

Question

我試圖通過html滑塊修改直方圖佈局的bin，但沒有成功。
我試圖運行滑塊的代碼是：

<div id = "range"> 
<input type="range" min="1" max="50" step="1" value="25"> 
</div> 

然後我設置了直方圖的bins至var bin。
JS的與範圍滑塊的值來更新箱代碼：

d3.select("#range") 
.select("input") 
.on("change", function() { 
    this.value == bin; 
    //The two histogram variables, line and path generators 
    histogSans = d3 .layout.histogram() 
         .bins(bin) 
         .value(function (d) { return d.Peso; }) 
         (FontSans); 
    histogSerif = d3 .layout.histogram() 
         .bins(bin) 
         .value(function (d) { return d.Peso; }) 
         (FontSans); 
    line = d3.svg.line() 
      .x(function (d) { return x(d.x); }) 
      .y(function (d) { return y(d.y); }); 
    SansPath = svg 
      .transition() 
      .duration(1500) 
      .attr("d", line(histogSans)); 
}); 

其中histogSans & histogSerif是直方圖值的發電機，line是線發生器和SansPath & SerifPath是路徑生成器，遵循直方圖值。

編輯：感謝cuckovic我現在能得到正確的價值出來的滑塊，與bin = this.value;，但直方圖的控制檯日誌現在返回一個錯誤的陣列中，只包含所有的數組數據集中的值，所以這些值沒有正確繪製！任何人都知道這是爲什麼發生？ 全部代碼在這裏：http://dl.dropboxusercontent.com/u/37967455/confronto_pesi.html

Answer 1

在我看來，你必須改變

this.value == bin; 

到

var bin = this.value; 

這裏工作的例子 - http://jsfiddle.net/M3NDv/

Answer 2

我設法得到它更新軸和路徑，主要問題是range value未被識別爲value，所以把它放在前面解決，再加上其他一些小東西。
下面的代碼，如果有人有興趣：

d3.select("#range") 
    .select("input") 
    .on("change", function() { 
     bin = +this.value; 
     //Le due variabili di istogramma 
     histogSans = d3 .layout.histogram() 
          .bins(bin) 
          .value(function (d) { return d.Peso; }) 
          (FontSans); 
     histogSerif = d3 .layout.histogram() 
          .bins(bin) 
          .value(function (d) { return d.Peso; }) 
          (FontSerif); 
     MaxSans = d3.max(histogSans, function (d) { return d.y; }); 
     MaxSerif = d3.max(histogSerif, function (d) { return d.y; }); 
     y.domain([0, d3.max(dataset, function (d) { 
       if (MaxSans >= MaxSerif) 
        { return MaxSans; } 
       else { return MaxSerif; }; 
       })]).nice(); 
     console.log(MaxSans, MaxSerif); 
     gy .transition() 
      .duration(1000) 
      .call(yAxis); 
     line = d3.svg.line() 
       .interpolate("monotone") 
       .x(function (d) { return x(d.x); }) 
       .y(function (d) { return y(d.y); }); 
     SansPath 
      .transition() 
      .duration(500) 
      .attr("d", line(histogSans)); 
     SerifPath 
      .transition() 
      .duration(500) 
      .attr("d", line(histogSerif)); 
});