Проблема, создающая перекрывающиеся множественные круговые диаграммы (круговые полосы хода)

У меня есть 3 показателя для отображения списка компаний. Я пытаюсь получить экран с тремя круговыми барами для каждой компании.Проблема, создающая перекрывающиеся множественные круговые диаграммы (круговые полосы хода)

Я не уверен, как отформатировать данные и как их разобрать, чтобы нарисовать бары. Прямо сейчас у меня есть только одно значение, отображаемое три раза. Я также использую столбец CSV, чтобы нарисовать светло-серый бар, чтобы завершить круговую форму. Я уверен, что есть лучший способ сделать то, что я пытаюсь выполнить, хотел бы, чтобы кто-то мог помочь! Бесконечно благодарен.

Plunk здесь:

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]}; 
    }); 

    });

источник

2016-07-28 Capivara Graphics

Ваши коды хороший старт, но я сделаю это немного по-другому (и немного проще):

<!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>

источник

2016-07-28 21:36:15 Mark

Довольно удивительно, спасибо Марк! И да, код намного проще и красивее. –

Проблема, создающая перекрывающиеся множественные круговые диаграммы (круговые полосы хода)

ответ

Смежные вопросы