2016-08-11 5 views
0

원형 차트을 프로그래밍 방식으로 작성하여이를 재사용하기 위해 React Component로 바꾸려고합니다. 기본적으로 클릭 할 수있는 원형 차트가 필요하며 클릭하면 각 슬라이스가 전체 원형으로 확장됩니다. 나는 this tutorial원형 차트으로 만들고 아래쪽에 나는 시험해보기 위해 JS 조각을 가지고있다. 내가 끝내 버렸다 Uncaught Reference Error: $$ is not defined. 다음은 오류 메시지의 스크린 샷입니다.

enter image description here

나의 이해는이 jQuery를하지 이며, 단순히 바닐라 JS 것입니다. 이것이 사실인지 확실하지 않습니다. jQueryCDN을 통해 가져 왔지만 여전히 동일한 오류가 발생했습니다. 나는이 SO post을 읽고 나는 $$이 단순히 변수 이름 표기법의 일종이라고 생각하고 있습니다.

이것은 index.html에있는 코드이며 획기적인 내용은 아닙니다.

<body> 
    <div class="pie">20%</div> 
    <div class="pie">60%</div> 
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> 
    <script type="text/javascript"> 
    $$('.pie').forEach(function(pie) { 
     var p = parseFloat(pie.textContent); 
     var NS = "http://www.w3.org/2000/svg"; 
     var svg = document.createElementNS(NS, "svg"); 
     var circle = document.createElementNS(NS, "circle"); 
     var title = document.createElementNS(NS, "title"); 
     circle.setAttribute("r", 16); 
     circle.setAttribute("cx", 16); 
     circle.setAttribute("cy", 16); 
     circle.setAttribute("stroke-dasharray", p + " 100"); 
     svg.setAttribute("viewBox", "0 0 32 32"); 
     title.textContent = pie.textContent; 
     pie.textContent = ''; 
     svg.appendChild(title); 
     svg.appendChild(circle); 
     pie.appendChild(svg); 
    }); 
    </script> 
</body> 

오류의 원인은 무엇입니까? 내가 오해하고 있니? 나는 오래된/잘못된 것을 따르고있는 튜토리얼을 가지고 있습니까? 고맙습니다!

+1

'$$'은 어디에 정의되어 있습니까? – Rayon

+0

질문을 편집하고 코드가 아닌 텍스트를 제공하십시오. 이미지가 아닙니다. – Steve

답변

2

은 다음과 같습니다 도움이 링크입니다 : 저자, 레아 베루에 따르면

function $$(selector, context) { 
    context = context || document; 
    var elements = context.querySelectorAll(selector); 
    return Array.prototype.slice.call(elements); 
} 

에게, 그녀는 언급 :

in the book the definition of $$() is given in the introduction, but since this is an excerpt, it doesn’t include that.

+0

오 고맙습니다 !! 이것은 매우 유용하고 고쳐졌습니다. 내 직감은 옳았 어. 어쨌든, 그렇게 대답하면 받아 들일거야. :) – Sticky

1

tutorial 귀하는 귀하의 질문에 내가 언급 한 내용이 있다고 생각합니다. 에게 도움을줍니다. 당신이 당신의 태그에 jQuery를 언급으로

enter image description here

또한, 당신은

$(function(){....}); 

, code해야합니다.

희망이 도움이됩니다.

관련 문제