Donut Chart mithilfe von d3.js und csv

[Mograu]

Hallo,

ich bin neu hier im Forum und hoffe, dass mir hier jemand helfen kann. Ich habe schon in anderen Foren versucht Hilfe zu bekommen, bisher aber vergeblich.
Ich hoffe, dass ich diese Frage hier an die richtige Stelle poste und hier auch ein paar Leute sind, die sich mit der d3-lib auskennen.

Jetzt zu meinem Problem. Ich versuche einen Donut Chart zu erstellen, bei dem die einzelnen "Kuchenstücke" dragbar sind. Hierzu nutze ich Django und d3.js. Beim Drag-und-Drop soll sich hierbei der äußere Radius des entsprechenden "Kuchenstücks", des Dount Charts verändern. Das habe ich soweit auch schon alles zum laufen gebracht. Allerdings möchte ich die Daten nicht in mein html-Dokument reinschreiben, sondern aus einer csv Datei laden. Und hier liegt mein Problem, denn das will mir einfach nicht gelingen. Es wäre toll, wenn hier jemand wäre der mir helfen könnte und am besten auch mithilfe von Code antworten würde.

Hier habe ich mal mein Code phne den Import von csv:

    <script src='http://d3js.org/d3.v3.min.js'></script>
    <script>

	var width = 760,
    	height = 550;
    	
    var innerradius = 200;
        
   	var color = d3.scale.category20b();     
	
	var cScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);
	
	
	
	var dataset = [
          { label: 'Abulia', count: 10, start: 0, end: 10, radius: 10 }, 
          { label: 'Betelgeuse', count: 20, start: 10, end: 20, radius: 20 },
          { label: 'Cantaloupe', count: 30, start: 30, end: 60, radius: 20 },
          { label: 'Dijkstra', count: 40, start: 60, end: 100, radius: 20 }
 	];
 	
	
	var svg = d3.select('#content').append('svg')
    			.attr('width', width)
    			.attr('height', height)
    			.append('g')
    			.attr('transform', 'translate(' + (width / 2) +  ',' + (height / 2) + ')');
    
    	
 			
    var arc = d3.svg.arc()
          .innerRadius(innerradius)             
          .outerRadius(function(d){return d.radius + innerradius;})
          .startAngle(function(d){return cScale(d.start);}) 
          .endAngle(function(d){return cScale(d.end);});         
          
          
    var path = svg.selectAll('path')
          .data(dataset)
          .enter()
          .append('path')
          .attr('d', arc)
          .style("fill", function(d){return color(d.label);});



var drag = d3.behavior.drag()          
   .on('drag', function(d) {
                d.radius = Math.sqrt(d3.event.x * d3.event.x + d3.event.y * d3.event.y) - innerradius ;
             
                path.each(function (d){
                    
                        d3.select(this).attr('d', arc);
                    
                });
                                })
		path.call(drag);	
    </script>

Schonmal vielen Dank im Vorraus!

 

[kkapsner]

Zeig' doch mal, wie du den CSV-Import probiert hast.

 

[Mograu]

Also normalerweise sollte das irgendwie auf diese Art funktionieren:

<script src='http://d3js.org/d3.v3.min.js'></script>
    <script>

	var width = 760,
    	height = 550;
    	
    var innerradius = 200;
        
   	var color = d3.scale.category20b();     
	
	var cScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);
	
	
	
	
 	
	
	var svg = d3.select('#content').append('svg')
    			.attr('width', width)
    			.attr('height', height)
    			.append('g')
    			.attr('transform', 'translate(' + (width / 2) +  ',' + (height / 2) + ')');
    
    
d3.csv("data.csv", function(error, dataset) {
  
 			
    var arc = d3.svg.arc()
          .innerRadius(innerradius)             
          .outerRadius(function(d){return d.radius + innerradius;})
          .startAngle(function(d){return cScale(d.start);}) 
          .endAngle(function(d){return cScale(d.end);});         
          
          
    var path = svg.selectAll('path')
          .data(dataset)
          .enter()
          .append('path')
          .attr('d', arc)
          .style("fill", function(d){return color(d.label);});

});

var drag = d3.behavior.drag()          
   .on('drag', function(d) {
                d.radius = Math.sqrt(d3.event.x * d3.event.x + d3.event.y * d3.event.y) - innerradius ;
             
                path.each(function (d){
                    
                        d3.select(this).attr('d', arc);
                    
                });
                                })
		path.call(drag);	
    </script>

Und hier das csv dazu:

label,count,start,end,radius
Abulia,10,0,10,10 
Betelgeuse,20,10,20,20
Cantaloupe,30,30,60,20
Dijkstra,40,60,100,20

Aber naja, es funktionier nicht also mache ich es offenbar nicht richtig

 

[kkapsner]

Da sollte was in der Fehlerkonsole stehen...

Du darfst must mit dem .behavior.drag auch in den Callback der CSV-Datei packen. Sonst hast du ja gar keinen Zugriff auf die Variable path. (Und es ist gut, dass die Variable nicht global erreichbar ist).

PS: Ich würde ja alles in den Callback packen. Dann hast du deine Daten schön gekapselt und kleine globalen Variablen erzeugt.

 

[Mograu]

Ja das habe ich auch schon versucht Aber auch hier passiert leider nichts :/

Der Donut-Chart wird auch nichtmal angezeigt, was mich vermuten lässt, dass ich die Daten überhaupt nicht richtig auslese. Aber ich habe auch nicht wirklich eine Idee was am auslesen falsch sein könnte.

 

[kkapsner]

Hast du einen Testlink, wo wir uns das live anschauen können?