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 响应滑动事件，从而使矩形高度的变化更令人赏心悦目。