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

我想构建包含8-10行的网页，它在滑块移动时展开。所以，基本上它应该是一个顶部的滑块和它下面的一些行 - 当我移动滑块时，我想要同时移动所有行来扩大或仅增加宽度。当我向下移动滑块时减少。以下是目前的代码：使用D3使滑块在水平条形图上工作

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

来源

2015-10-18 Deepanshu Kaushik

您不应该在每次幻灯片事件中重新创建您的rects。所有你需要的是改变这些的宽度已经在那里：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <link data-require="[email protected]" 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="[email protected]" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
 
    <script data-require="[email protected]" 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>

来源

2015-10-18 19:40:25 Mark

嗨，马克，感谢这个完美的工作，有没有什么办法让每行的转换速率不同，并为它们提供不同的最小值和最大值。 –

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <link data-require="[email protected]" 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="[email protected]" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 
 
    <script data-require="[email protected]" 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>

来源

2015-10-19 06:52:06

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

回答

相关问题