2013-03-26 17 views
5

Also ich fange nur d3.js und ich bekomme immer einen JavaScript-Fehler und ich habe keine Ahnung warum. Ich habe gerade drei Kreise mit Svg erstellt und möchte sie mit d3 auswählen. Hier ist mein Code:Problem mit der Einführung in d3.js

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script type="text/javascript"></script>   
</head> 
<body> 
    <svg width="360" height="180"> 
     <circle class="little" cx="180" cy="45" r="12"></circle> 
     <circle class="little" cx="60" cy="90" r="12"></circle> 
     <circle class="little" cx="300" cy="135" r="12"></circle> 
    </svg> 
    <script type="text/javascript"> 
     var circle = svg.selectAll("circle"); 
    </script> 
</body> 
</html> 

Dies soll die Kreise auf der Seite wählen, damit ich sie manipulieren kann, aber ich halte einen Verweis Fehler in meiner Web-Konsole erhalten, die svg sagt nicht definiert ist? Aber das einführende Tutorial sagt nichts über die Definition von Svg?

+0

Welches Tutorial folgen Sie? –

+0

Dieser: http://mbostock.github.com/d3/tutorial/circle.html – AzzyDude

+0

Ja, er erwähnt es wirklich nicht, zumindest nicht explizit, nicht einmal in der [Einleitung] (http: // d3js .org /). Was ich in diesen Situationen hilfreich fand, ist die Seitenquelle anzuschauen und den tatsächlichen Code zu überprüfen. –

Antwort

8

Sie müssen das Svg-Element zuerst auswählen, bevor Sie svg.selectAll verwenden.

var svg = d3.select(document.getElementById('sampleSVGId')), 
    circle = svg.selectAll('circle'); 
+2

Ich wünschte, sie hätten das im Tutorial spezifiziert :( – AzzyDude

+0

Könnten Sie mit dem Tutorial verlinken? Objekte im Allgemeinen werden nicht magisch für Sie erstellt, wenn nicht anders angegeben. – Vinay

+0

Aber ich verstehe Ihren Schmerz. Dinge können frustrierend sein, wenn Sie gerade sind Anfang in einem Bereich und die Dokumentation ist nicht klar/anfängerfreundlich – Vinay