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

Question

I want to built webpage which consist of 8-10 rows which expands when the slider is moved. 我要构建一个由8-10行组成的网页，当滑块移动时该网页会扩展。 so, basically it would be a slider on top and some rows underneath it - I want to move all the rows to expand or increase in size only width simultaneously when I move the slider. 因此，基本上，它将是一个位于顶部的滑块，其下方是一些行-当我移动滑块时，我想同时移动所有行以仅在宽度上扩大或增加大小。 And to reduce when I move down the slider. 并且减少当我向下移动滑块时。 Here is the code currently: 这是当前的代码：

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

You shouldn't be re-creating your rects on every slide event. 您不应该在每个幻灯片事件上都重新创建自己的矩形。 All you need is to change the width of those already there: 您所需要做的就是更改已经存在的宽度：

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

Answer 2

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

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

问题描述

2 个解决方案

解决方案1
0 2015-10-18 19:40:25

解决方案2
0 2015-10-19 06:52:06

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

问题描述

2 个解决方案

解决方案1 0 2015-10-18 19:40:25

解决方案2 0 2015-10-19 06:52:06

解决方案1
0 2015-10-18 19:40:25

解决方案2
0 2015-10-19 06:52:06