Javascript D3js单条形图通过滑块进行更新

我试图创建一个简单的条形图，当您更改滑块值时，它会更新，我遇到了几个问题。我不知道如何在更改滑块时更新svg元素的属性，而不绘制一个全新的svg元素，从而创建两个、三个和四个元素

你可以在

这是我的密码

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

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



$( "#slider" ).slider({
  change: 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);

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

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





            rectangle.attr("width", 20)

            .attr("height", function(d){
                return d;
            })
            .attr("x", function(d){
                return 20;
            })
            .attr("y", function(d){
                return 20;
            });


  }
});

---

只需要做一些改变

更改输入/更新选择的处理方式：

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

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

rectangle
    .attr("width", 20)
    ...

更改SVG元素在滑块处理程序外部的位置

完成

注意：SVG元素的当前高度不足以查看滑块允许的更改大小。你应该增加这个数值，比如说

attr（“height”，200）

---

另一个是对滑动事件的响应，从而使矩形高度的变化更令人赏心悦目。

嗨，我在小提琴上做了一个微小但重要的变化，我想你可能会喜欢：听滑动事件而不是变化，使对滑动运动的响应持续不断（在我看来，更令人愉快）。我把它添加到了帖子中。看看。我如何使矩形变大而不是变小？谢谢！如果有人需要它，我就想出来：。attr（“transform”，function（d，I）{return“translate（20500）rotate（180）”；}）这将把矩形放置在500x500px svg容器的左下角，20是矩形的宽度。