JS：使用滑块

我正在尝试使用d3.js创建一个可以排序并根据滑块输入动态更改高度的列图表。在使用滑块时，我在两方面遇到了一些麻烦。JS：使用滑块

（1）目前，页面看起来如下：

我无法弄清楚如何重新定位滑块，它是对巴图的右侧，而不是在其下方。我试着改变滑块的div标签使用风格，但没有改变任何东西。（2）作为JS的初学者，我会很感激任何有关如何基于滑块输入动态更改条形图高度的建议。如果滑块输入较大，则条形图高度应该更大。

来源

2016-12-24 user2657817

'如果滑块输入较大，条形图高度应该较大，这是什么意思？如果将滑块拖动到右侧，则条形会增加高度？它如何调整“排名”值？ – Mark

很难回答这个问题，因为我不知道你真正的最终目标（见上面我的意见），但这里有一个方法来证明你是什么后：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
 
    <link rel="stylesheet" href="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.css" /> 
 
    <script src="https://rawgit.com/sujeetsr/d3.slider/master/d3.slider.js"></script> 
 
</head> 
 

 
<body> 
 
    <label> <input type="checkbox"> Sort values</label> 
 
    <div id="testslider"></div> 
 

 
    <style> 
 
    body { 
 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
     position: relative; 
 
    } 
 
    
 
    .axis text { 
 
     font: 8px sans-serif; 
 
    } 
 
    
 
    .axis path, 
 
    .axis line { 
 
     fill: none; 
 
     stroke: #000; 
 
     shape-rendering: crispEdges; 
 
    } 
 
    
 
    .bar { 
 
     fill: green; 
 
     fill-opacity: .9; 
 
    } 
 
    
 
    .x.axis path { 
 
     display: none; 
 
    } 
 
    
 
    label { 
 
     position: absolute; 
 
     top: 10px; 
 
     right: 10px; 
 
    } 
 
    
 
    #testslider { 
 
     position: absolute; 
 
     top: 25px; 
 
     right: 10px; 
 
     width: 200px; 
 
     margin-left: 30px; 
 
    } 
 
    </style> 
 

 
    <script type="text/javascript"> 
 
    var margin = { 
 
     top: 20, 
 
     right: 20, 
 
     bottom: 30, 
 
     left: 40 
 
     }, 
 
     width = 750 - margin.left - margin.right, 
 
     height = 375 - margin.top - margin.bottom; 
 

 
    var formatPercent = d3.format(".0"); 
 

 
    var x = d3.scale.ordinal() 
 
     .rangeRoundBands([0, width], .1, 1); 
 

 
    var y = d3.scale.linear() 
 
     .range([height, 0]); 
 

 
    var xAxis = d3.svg.axis() 
 
     .scale(x) 
 
     .orient("bottom"); 
 

 
    var yAxis = d3.svg.axis() 
 
     .scale(y) 
 
     .orient("left") 
 
     //.tickFormat(formatPercent); 
 

 
    var svg = d3.select("body").append("svg") 
 
     .attr("width", width + margin.left + margin.right) 
 
     .attr("height", height + margin.top + margin.bottom) 
 
     .append("g") 
 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
    var testerCallback = function() { 
 
     var val = slider.value(); 
 
     svg.selectAll(".bar") 
 
     .data(origData.map(function(d){ 
 
      return { 
 
      ranking: d.ranking * val, 
 
      drug: d.drug 
 
      }; 
 
     })) 
 
     .attr("y", function(d) { 
 
      return y(d.ranking); 
 
     }) 
 
     .attr("height", function(d) { 
 
      return height - y(d.ranking); 
 
     }); 
 
    }; 
 
    
 
    var data = [{ 
 
     drug: "A", 
 
     ranking: 0.1 
 
    }, { 
 
     drug: "B", 
 
     ranking: 0.3 
 
    }, { 
 
     drug: "C", 
 
     ranking: 0.3 
 
    }, { 
 
     drug: "D", 
 
     ranking: 0.5 
 
    }, { 
 
     drug: "E", 
 
     ranking: 0.5 
 
    }, { 
 
     drug: "F", 
 
     ranking: 0.4 
 
    }]; 
 

 
    var origData; 
 
    //d3.csv("data.tsv", function(error, data) { 
 
     
 
     data.forEach(function(d) { 
 
     d.ranking = +d.ranking; 
 
     }); 
 

 
     origData = data; 
 
    
 
     x.domain(data.map(function(d) { 
 
     return d.drug; 
 
     })); 
 

 
     svg.append("g") 
 
     .attr("class", "x axis") 
 
     .attr("transform", "translate(0," + height + ")") 
 
     .call(xAxis); 
 

 
     svg.append("g") 
 
     .attr("class", "y axis") 
 
     .call(yAxis) 
 
     .append("text") 
 
     .attr("transform", "rotate(-90)") 
 
     .attr("y", 5) 
 
     .attr("dy", ".71em") 
 
     .style("text-anchor", "end") 
 
     .text("Score (Higher is better)"); 
 

 
     svg.selectAll(".bar") 
 
     .data(data) 
 
     .enter().append("rect") 
 
     .attr("class", "bar") 
 
     .attr("x", function(d) { 
 
      return x(d.drug); 
 
     }) 
 
     .attr("width", x.rangeBand()) 
 
     .attr("y", function(d) { 
 
      return y(d.ranking); 
 
     }) 
 
     .attr("height", function(d) { 
 
      return height - y(d.ranking); 
 
     }); 
 

 
     d3.select("input").on("change", change); 
 

 
     function change() { 
 
     var x0 = x.domain(data.sort(this.checked ? 
 
       function(a, b) { 
 
       return b.ranking - a.ranking; 
 
       } : 
 
       function(a, b) { 
 
       return d3.ascending(a.drug, b.drug); 
 
       }) 
 
      .map(function(d) { 
 
       return d.drug; 
 
      })) 
 
      .copy(); 
 
     svg.selectAll(".bar") 
 
      .sort(function(a, b) { 
 
      return x0(a.drug) - x0(b.drug); 
 
      }); 
 
     var transition = svg.transition().duration(750), 
 
      delay = function(d, i) { 
 
      return i * 50; 
 
      }; 
 
     transition.selectAll(".bar") 
 
      .delay(delay) 
 
      .attr("x", function(d) { 
 
      return x0(d.drug); 
 
      }); 
 
     transition.select(".x.axis") 
 
      .call(xAxis) 
 
      .selectAll("g") 
 
      .delay(delay); 
 
     } 
 

 
    //}); 
 

 
    var tickFormatter = function(d) { 
 
     return d === 0 ? "not important" : "very important"; 
 
    }; 
 

 
    var slider = d3.slider().min(0).max(1).value(1).ticks(1).showRange(true).tickFormat(tickFormatter).callback(testerCallback); 
 
    d3.select('#testslider').call(slider); 
 
    d3.selectAll(".tick>text").style("text-anchor", "start"); 
 
    d3.selectAll(".tick:last-of-type>text").style("text-anchor", "end"); 
 
    </script> 
 
</body> 
 

 
</html>

来源

2016-12-24 15:40:33 Mark

非常感谢！ – user2657817

如果您想拥有多个可以动态更改条形图的滑块，那么您会怎么做呢？ – user2657817

JS：使用滑块

回答

相关问题