个人中心
gpt4 book ai didi

javascript - 使用 D3 使 slider 在水平条形图上工作

转载 作者：行者123 更新时间：2023-11-28 06:48:26 25 4
gpt4 key购买 nike

我想构建由 8-10 行组成的网页，当 slider 移动时该网页会扩展。所以，基本上它是顶部的 slider 和下面的一些行 - 当我移动 slider 时，我想移动所有行以同时扩展或增加尺寸(仅宽度)。当我向下移动 slider 时减少。目前的代码如下:

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

最佳答案

您不应该在每个幻灯片事件中重新创建矩形。您所需要的只是更改已有宽度:

<!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>

关于javascript - 使用 D3 使 slider 在水平条形图上工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33199376/

25 4 0
文章推荐： javascript - 动态管理LTE或Bootstrap
文章推荐： c++ - 为不同的文件扩展名调用不同的函数
文章推荐： c# - 在C#中分配内存
文章推荐： javascript - Douglas Crockford 书中 Function.prototype 上的“方法”
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com