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响应幻灯片事件，从而使更改到rect的高度更令人愉悦。

D3js通过滑块单条形图更新

1 个答案: