I want to built webpage which consist of 8-10 rows which expands when the slider is moved. 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);
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>
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.