zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Donut Chart mithilfe von d3.js und csv

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.09.2015, 18:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.09.2015
Beiträge: 1
Mograu befindet sich auf einem aufstrebenden Ast
Standard Donut Chart mithilfe von d3.js und csv

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 ohne den Import von csv:

Code:
<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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.10.2015, 15:10
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.10.2010
Beiträge: 154
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

Naja, klingt für mich, als suchtest du einen CSV-Parser!? Oder hast du Probleme beim (herunter)laden der CSV-Datei?

Und warum CSV? JSON ist für diesen Zweck eigentlich praktischer.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
csv, d3.js, donutchart, javascript

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 04:07 Uhr.