使用 html 范围滑块更新直方图箱

Question

我正在尝试通过 html 滑块修改直方图布局的 bin，但没有成功。
我尝试为滑块运行的代码是：

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

然后我将直方图的bins 设置为var bin。
用范围滑块的值更新 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));
});