Question

我想建立一个由8-10行组成的网页，当滑块移动时会扩展。所以，基本上它将是一个顶部的滑块和它下面的一些行 - 我想移动所有行，以便在我移动滑块时同时扩展或增加尺寸。当我向下移动滑块时减少。这是目前的代码：

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

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


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

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

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

        rectangle.attr("height", 20)
            .attr("width", function (d) { console.log('d is ' + d);
            return d;
        })
            .attr("x", function (d) {
            return 20;
        })
            .attr("y", function (d) {
            return 20;
        });

        var w1 = 500;
        var h1 = 50;

        var dataset1 = [];

        dataset1.push(selection);

        console.log(dataset1);        

        var rectangle1 = svg.selectAll("rect1")
            .data(dataset1);

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

        rectangle1.attr("height", 20)
            .attr("width", function (d) { console.log('d is ' + d);
            return d;
        })
            .attr("x", function (d) {
            return 20;
        })
            .attr("y", function (d) {
            return 50;
        });


        var w2 = 500;
        var h2 = 50;

        var dataset2 = [];

        dataset2.push(selection);

        console.log(dataset2);        

        var rectangle2 = svg.selectAll("rect2")
            .data(dataset2);

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

        rectangle2.attr("height", 20)
            .attr("width", function (d) { console.log('d is ' + d);
            return d;
        })
            .attr("x", function (d) {
            return 20;
        })
            .attr("y", function (d) {
            return 80;
        });


    }
});

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

Answer 1

您不应该在每个幻灯片事件上重新创建您的rects。您只需要更改那些已经存在的宽度：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link data-require="jqueryui@1.10.0" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
  <script data-require="jqueryui@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <div id="slider"></div>
  <script>
    $(function() {

      $("#slider").slider({
        min: 100,
        max: 500,
        // on slide adjust width of all rects
        slide: function(event, ui) {
          svg.selectAll("rect")
            .attr("width", ui.value);
        }
      });

      // create svg
      var svg = d3.select("body")
        .append("svg")
        .attr("width", 600)
        .attr("height", 600);

      // add 4 rects
      svg.selectAll("rect")
        .data([1, 2, 3, 4])
        .enter()
        .append("rect")
        .attr("x", 10)
        .attr("y", function(d) {
          return d * 25;
        })
        .attr("height", 20)
        .attr("width", 100);
     
    });
  </script>
</body>

</html>

＆＃13;

Answer 2

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link data-require="jqueryui@1.10.0" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
  <script data-require="jqueryui@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <div id="slider"></div>
  <script>
    $(function() {
 

var data = [ { rate:1.1, max:100 }, { rate:1.2, max:200 }, { row:1.3, max:300 }, { row:1.4, max:400 }];

$("#slider").slider({
    min: 100,
    max: 500,
    // on slide adjust width of all rects
    slide: function(event, ui) {
      svg.selectAll("rect")
        .attr("width", function (d) {
             return Math.max(ui.value * d.rate, d.max);
        });
    }
});
  </script>
</body>

</html>

＆＃13;

使用D3使滑块在水平条形图上工作

2 个答案: