Javascript 使用D3使滑块在水平条形图上工作

我想建立一个网页，其中包括8-10行扩展时，滑块被移动。所以，基本上它是顶部的一个滑块，下面的一些行-当我移动滑块时，我想移动所有的行以同时扩展或增加大小和宽度。当我向下移动滑块时，减小。以下是当前的代码：

     $("#slider").slider({
    max: 850
});

$("#slider").slider({
    min: 30
});


$("#slider").slider({
    slide: function (event, ui) {
        var selection = $("#slider").slider("value");
        console.log(selection);

        //Width and height
        var w = 500;
        var h = 50;

        //Data
        var dataset = [];

        dataset.push(selection);

        console.log(dataset);        

        var rectangle = svg.selectAll("rect")
            .data(dataset);

        rectangle
            .enter()
            .append("rect");

        rectangle.attr("height", 20)
            .attr("width", function (d) { console.log('d is ' + d);
            return d;
        })
            .attr("x", function (d) {
            return 20;
        })
            .attr("y", function (d) {
            return 20;
        });

        var w1 = 500;
        var h1 = 50;

        var dataset1 = [];

        dataset1.push(selection);

        console.log(dataset1);        

        var rectangle1 = svg.selectAll("rect1")
            .data(dataset1);

        rectangle1
            .enter()
            .append("rect");

        rectangle1.attr("height", 20)
            .attr("width", function (d) { console.log('d is ' + d);
            return d;
        })
            .attr("x", function (d) {
            return 20;
        })
            .attr("y", function (d) {
            return 50;
        });


        var w2 = 500;
        var h2 = 50;

        var dataset2 = [];

        dataset2.push(selection);

        console.log(dataset2);        

        var rectangle2 = svg.selectAll("rect2")
            .data(dataset2);

        rectangle2
            .enter()
            .append("rect");

        rectangle2.attr("height", 20)
            .attr("width", function (d) { console.log('d is ' + d);
            return d;
        })
            .attr("x", function (d) {
            return 20;
        })
            .attr("y", function (d) {
            return 80;
        });


    }
});

//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 300);

---

您不应该在每次幻灯片事件中都重新创建矩形。您只需更改已经存在的宽度：

$（函数（）{
$（“#滑块”）.滑块({
最低:100,，
最高：500，
//在幻灯片上调整所有矩形的宽度
幻灯片：功能（事件、用户界面）{
svg.selectAll（“rect”）
.attr（“宽度”，用户界面值）；
}
});
//创建svg
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，600）
.attr（“高度”，600）；
//添加4个矩形
svg.selectAll（“rect”）
.数据（[1,2,3,4]）
.输入（）
.append（“rect”）
.attr（“x”，10）
.attr（“y”，函数（d）{
返回d*25；
})
.attr（“高度”，20）
.attr（“宽度”，100）；
});

您不应该在每次幻灯片事件中都重新创建矩形。您只需更改已经存在的宽度：

$（函数（）{
$（“#滑块”）.滑块({
最低:100,，
最高：500，
//在幻灯片上调整所有矩形的宽度
幻灯片：功能（事件、用户界面）{
svg.selectAll（“rect”）
.attr（“宽度”，用户界面值）；
}
});
//创建svg
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，600）
.attr（“高度”，600）；
//添加4个矩形
svg.selectAll（“rect”）
.数据（[1,2,3,4]）
.输入（）
.append（“rect”）
.attr（“x”，10）
.attr（“y”，函数（d）{
返回d*25；
})
.attr（“高度”，20）
.attr（“宽度”，100）；
});

$（函数（）{
var数据=[{rate:1.1，max:100}，{rate:1.2，max:200}，{row:1.3，max:300}，{row:1.4，max:400}]；
$（“#滑块”）.滑块({
最低:100,，
最高：500，
//在幻灯片上调整所有矩形的宽度
幻灯片：功能（事件、用户界面）{
svg.selectAll（“rect”）
.attr（“宽度”，函数（d）{
返回数学最大值（ui.value*d.rate，d.max）；
});
}
});

$（函数（）{
var数据=[{rate:1.1，max:100}，{rate:1.2，max:200}，{row:1.3，max:300}，{row:1.4，max:400}]；
$（“#滑块”）.滑块({
最低:100,，
最高：500，
//在幻灯片上调整所有矩形的宽度
幻灯片：功能（事件、用户界面）{
svg.selectAll（“rect”）
.attr（“宽度”，函数（d）{
返回数学最大值（ui.value*d.rate，d.max）；
});
}
});

Hi-Mark，感谢您的完美工作，是否有办法以不同的转换速率转换每一行，并为其提供不同的最小值和最大值。Hi-Mark，感谢您的完美工作，是否有办法以不同的转换速率转换每一行，并为其提供不同的t最小值和最大值。