Question

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

<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＆amp; histogSerif是直方图值的生成器，line是行生成器，SansPath＆amp; 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));
});

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

2 个答案: