[英]D3 jQuery range slider does not work
I have searched stackoverflow but I couldn't find a solution for my case.我搜索了 stackoverflow,但找不到适合我的案例的解决方案。
I am doing a simple interactive visualization with D3.我正在用 D3 做一个简单的交互式可视化。 I want to include a range slider for users to select a range.我想包含一个范围滑块供用户选择范围。 Then create a filter function that filters the data based on the selected range and updates the visualization.然后创建一个过滤函数,根据选定的范围过滤数据并更新可视化。 The range slider just does not show up in my browser (both Chrome and Safari).范围滑块没有显示在我的浏览器(Chrome 和 Safari)中。
Relevant code:相关代码:
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="layout">
<div id="title">
<p>Stocks Scatterplot</p>
</div>
<div id="visualization">
<div id="controls">
<!--create the sliders here-->
<p>Assists</p>
<div id="assists" class="d3-slider"></div>
<label for="assistamount">Assists range:</label>
<input type="text" id="assistamount" readonly style="border:0; color:#f6931f;
font-weight:bold;">
</div>
</div>
</div>
</body>
jQuery: jQuery:
$(function() {
$("#assits").slider({
range: true,
min: 0,
max: maxAssists,
values:[0,maxAssists],
slide: function(event, ui) {
$("#assistamount").val(ui.values[0]+"-"+ui.values[1]);
filterAssists(ui.values);}
});
$("#assistamount").val($("#assits").slider("values",0) + "-" + $("#assits").slider("values",1));
});
Any thoughts?有什么想法吗? Thanks in advance.提前致谢。
You have a typo!!你打错了!!
$("#assits")
should be $("#assists")
. $("#assits")
应该是$("#assits")
$("#assists")
。 I guess you have defined maxAssests
before the slider definition as well.我猜你在滑块定义之前也定义了maxAssests
。
Also use more up to date versions of jquery & ui.还可以使用最新版本的 jquery 和 ui。 I got your code to work with these.我得到了你的代码来处理这些。
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.