D3 jQuery 범위 슬라이더가 작동하지 않습니다.

-1

stackoverflow를 검색했지만 제 경우에 대한 해결책을 찾을 수 없습니다.
D3으로 간단한 대화 형 시각화를 수행하고 있습니다. 사용자가 범위를 선택하기위한 범위 슬라이더를 포함하고 싶습니다. 그런 다음 선택한 범위를 기반으로 데이터를 필터링하고 시각화를 업데이트하는 필터 함수를 만듭니다. 범위 슬라이더가 내 브라우저 (Chrome 및 Safari 모두)에 표시되지 않습니다.

관련 코드 :D3 jQuery 범위 슬라이더가 작동하지 않습니다.

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

어떤 생각? 미리 감사드립니다.

출처

2017-02-13 Emile

오타가 있습니다!
$("#assits")은 $("#assists")이어야합니다. 슬라이더 정의 앞에 maxAssests을 정의했다고 생각합니다.

또한 jquery & 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>

출처

2017-02-13 03:53:45

안녕하세요 앤드류, 왜 "어시스트"대신 "assests"해야합니까? 내가 원하는대로 이름을 붙일 수있는 변수가 아닌가? – Emile

rip 나는 오타도 가지고있었습니다. 도움이되어야합니다. 내 대답을 업데이트했습니다 –

jquery 및 UI 업데이트 된 버전을 시도했지만 여전히 슬라이더가 표시되지 않았습니다. 브라우저에서 볼 수 있습니까? – Emile

D3 jQuery 범위 슬라이더가 작동하지 않습니다.

답변

관련 문제