javascript - D3js 单条形图通过 slider 更新

Question

我正在尝试创建一个简单的条形图，它会在您更改 slider 值时更新，但我遇到了几个问题。我不知道如何在不绘制全新 svg 元素的情况下更改 slider 时更新 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 元素放置在 slider 处理程序之外。

完成FIDDLE .

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

另一个FIDDLE响应滑动事件，从而使 rect 高度的变化更赏心悦目。