Problem beim Überlappen mehrerer Kreisdiagramme (kreisförmige Fortschrittsbalken)

Ich habe 3 Messwerte für eine Liste von Unternehmen angezeigt. Ich versuche, einen Bildschirm mit 3 Rundstäben für jede Firma zu bekommen.Problem beim Überlappen mehrerer Kreisdiagramme (kreisförmige Fortschrittsbalken)

Ich bin mir nicht sicher, wie man die Daten formatiert und wie man es analysiert, um die Stäbe zu zeichnen. Im Moment habe ich nur einen Wert, der dreimal angezeigt wird. Ich verwende auch eine Spalte der CSV, um einen hellgrauen Balken zu zeichnen, um die Kreisform zu vervollständigen. Ich bin sicher, es gibt einen besseren Weg, um das zu erreichen, was ich erreichen möchte. Ich würde es lieben, wenn jemand helfen könnte! Tausend Dank.

Plunk hier:

http://plnkr.co/edit/26PSKWrKcSenxAkwHqvh?p=preview

d3.csv("data.csv", function(error, data) { 
    if (error) throw error; 

    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Company"; })); 

    data.forEach(function(d) { 
    d.ages = color.domain().map(function(name) { 
     return {name: name, metric: +d[name]}; 
    }); 

    });

Quelle

2016-07-28 Capivara Graphics

Ihre Codes ein guter Anfang, aber ich würde es tun, ein wenig anders (und ein wenig simplier):

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 

 
body { 
 
    font: 10px sans-serif; 
 
} 
 

 
svg { 
 
    padding: 10px 0 0 10px; 
 
} 
 

 
</style> 
 
<body> 
 
<script src="http://d3js.org/d3.v3.min.js"></script> 
 
<script> 
 

 
var colors = d3.scale.category10(); 
 

 
var radius = 80, 
 
    padding = 10; 
 

 
// set up our 3 arcs 
 
var arcs = [ 
 
    d3.svg.arc() 
 
    .outerRadius(radius) 
 
    .innerRadius(radius - 8), 
 
    d3.svg.arc() 
 
    .outerRadius(radius - 10) 
 
    .innerRadius(radius - 18), 
 
    d3.svg.arc() 
 
    .outerRadius(radius - 20) 
 
    .innerRadius(radius - 28) 
 
]; 
 

 
// given this csv data 
 
var csv = `Company,score_A,score_B,score_C 
 
Natural Health Trends,10,50,70 
 
Vipshop,90,23,76 
 
Facebook,34,46,87`; 
 

 
// clean up data 
 
var data = d3.csv.parse(csv, function(d){ 
 
    return { 
 
    score_A: +d.score_A, 
 
    score_B: +d.score_B, 
 
    score_C: +d.score_C, 
 
    company: d.Company 
 
    } 
 
}); 
 

 
// an svg for every set of arcs 
 
var svg = d3.select("body").selectAll(".pie") 
 
    .data(data) 
 
    .enter().append("svg") 
 
    .attr("class", "pie") 
 
    .attr("width", radius * 2) 
 
    .attr("height", radius * 2) 
 
    .append("g") 
 
    .attr("transform", "translate(" + radius + "," + radius + ")"); 
 
    
 
// text in center 
 
svg.append("text") 
 
    .attr("dy", ".35em") 
 
    .style("text-anchor", "middle") 
 
    .text(function(d) { return d.company; }); 
 

 
// a g for gray and colored arcs 
 
var g = svg.selectAll(".arc") 
 
    .data(function(d){ 
 
    return [d.score_A, d.score_B, d.score_C]; 
 
    }) 
 
    .enter() 
 
    .append("g"); 
 

 
// gray portion just run 100 % 
 
g.append("path") 
 
    .attr("d", function(d,i){ 
 
    return arcs[i]({ 
 
     startAngle: 0, 
 
     endAngle: (2 * Math.PI) 
 
    }); 
 
    }) 
 
    .style("fill", "lightgray"); 
 

 
// colored portion 
 
g.append("path") 
 
    .attr("d", function(d,i){ 
 
    return arcs[i]({ 
 
     startAngle: 0, 
 
     endAngle: (d/100) * (2 * Math.PI) 
 
    }); 
 
    }) 
 
    .style("fill", function(d,i){ 
 
    return colors(i); 
 
    }); 
 

 
</script>

Quelle

2016-07-28 21:36:15 Mark

Ziemlich erstaunlich, danke Mark! Und ja, Code ist viel einfacher und schöner. –

Problem beim Überlappen mehrerer Kreisdiagramme (kreisförmige Fortschrittsbalken)

Antwort

Verwandte Themen