Question

我已经搜索了stackoverflow，但我无法为我的案例找到解决方案我正在使用D3进行简单的交互式可视化。我想包含一个范围滑块供用户选择范围。然后创建一个过滤器函数，根据所选范围过滤数据并更新可视化。范围滑块不会显示在我的浏览器中（Chrome和Safari）。

相关代码：

<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的：

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

有什么想法？提前谢谢。

Answer 1

你有拼写错误!!
$("#assits")应为$("#assists")。我猜你也在滑块定义之前定义了maxAssests。

还使用更多最新版本的jquery＆amp; UI。我得到了你的代码来处理这些。

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

D3 jQuery范围滑块不起作用

1 个答案: