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

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

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

其中，

historgsans

&

historgserif

是直方图值的生成器，

line

是行生成器，

SansPath

&

SerifPath

是遵循直方图值的路径生成器

编辑：多亏了库科维奇，我现在能够从滑块中获得正确的值，使用

bin=this.value，但直方图的控制台日志现在返回一个错误的数组，只包含数据集中所有值的数组，因此这些值没有正确绘制！有人知道为什么会这样吗？
这里的完整代码：
在我看来，您必须进行更改

this.value == bin;

到

这里是一个工作示例-
我设法使它更新了轴和路径，主要问题是
范围值
未被识别为
值
，因此在它前面加上+解决了其他一些小问题
如果有人感兴趣，下面是代码：

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));
});

好的，这正确地更新了bin变量确实，现在我需要弄清楚为什么直方图没有更新如果你想看一下，完整的代码在这里：
var bin = this.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));
});