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

Question

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

你可以在jsfiddle 上查看

这是我的代码

$( "#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;
            });

  }
});

Answer 1

只需要进行几个更改。

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

var rectangle = svg.selectAll("rect")
    .data(dataset);
rectangle
    .enter()
    .append("rect");
rectangle
    .attr("width", 20)
    ...

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

完成FIDDLE。

注意：SVG元素的当前高度不足以查看滑块允许的变化幅度。你应该增加，比如attr("height", 200)。

另一个FIDDLE响应幻灯片事件，从而使矩形高度的更改更赏心悦目。