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!