2016-08-11 14 views
0

私は円グラフをプログラムで作成して、再利用するためにそれを反応コンポーネントに変換したいと考えています。基本的には、クリック可能な円グラフが必要です。クリックすると、各スライスが全体の円に拡大されます。私は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

ありがとうございます!これは非常に役立ち、それを修正しました。私の昼食は正しかった:Dとにかく、それが許せば、私は答えとして受け入れるだろう:) – Sticky

1

投稿者tutorial私はあなたの質問に言及した私は何かを得たヘルプ。あなたがタグでのjQueryを言及したよう

enter image description here

はまた、あなたは

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

ラップでのごcodeする必要があります。

これが役に立ちます。

関連する問題