Создание нескольких кругов прогресса d3.js

Question

Я ищу для создания нескольких кругов прогресса. (Итак, нарисуйте 3 круга из одного набора данных)

Я пытался адаптироваться от примера this, но, как вы увидите, я где-то серьезно ошибся.

Первые шаги, которые я предпринял, состояли в том, чтобы изменить все данные на данные, так как я хочу, чтобы опция обрабатывала данные динамически. Затем я попытался упростить код, чтобы мне было понятнее и понятнее. (Я новичок d3!)

И теперь, я не уверен, что происходит, и надеялся, что кто-то поможет мне довести до конца результат?

Адрес fiddle и мой код;

/*global d3*/ 

var width = 240, 
    height = 125, 
    min = Math.min(width, height), 
    oRadius = min/2 * 0.8, 
    iRadius = min/2 * 0.85, 
    color = d3.scale.category20(); 

var arc = d3.svg.arc() 
    .outerRadius(oRadius) 
    .innerRadius(iRadius); 

var pie = d3.layout.pie().value(function(d) { 
    return d; 
}).sort(null); 

var data = [ 
    [20], 
    [40], 
    [60] 
]; 

// draw and append the container 
var svg = d3.select("#chart").selectAll("svg") 
    .data(data) 
    .enter().append("svg") 
    .attr("width", width).attr("height", height); 
svg.append('g') 
    .attr('transform', 'translate(75,62.5)') 
    .append('text').attr('text-anchor', 'middle').text("asdasdasdas") 


// enter data and draw pie chart 
var path = svg.selectAll("path") 
    .data(pie) 
    .enter().append("path") 
    .attr("class", "piechart") 
    .attr("fill", function(d, i) { 
    return color(i); 
    }) 
    .attr("d", arc) 
    .each(function(d) { 
    this._current = d; 
    }) 

function render() { 
    // add transition to new path 
    svg.selectAll("path") 
    .data(pie) 
    .transition() 
    .duration(1000) 
    .attrTween("d", arcTween) 

    // add any new paths 
    svg.selectAll("path") 
    .data(pie) 
    .enter().append("path") 
    .attr("class", "piechart") 
    .attr("fill", function(d, i) { 
     return color(i); 
    }) 
    .attr("d", arc) 
    .each(function(d) { 
     this._current = d; 
    }) 

    // remove data not being used 
    svg.selectAll("path") 
    .data(pie).exit().remove(); 
} 

render(); 


function arcTween(a) { 
    var i = d3.interpolate(this._current, a); 
    this._current = i(0); 
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

Спасибо всем!

Answer 1

У вас возникли проблемы с тем, где вы рисуете отдельные диаграммы. Все, что вам нужно сделать, это добавить перевод на каждый, чтобы они находились в центре их контейнеров.

Добавьте это после создания пути:

.attr('transform', 'translate(' + width/2 + ',' +height/2 + ')') 

width и height здесь размеры контейнеров, это переместит каждую таблицу в центре их контейнера.

Update скрипка: http://jsfiddle.net/thatOneGuy/dbrehvtz/2/

Очевидно, что вы, наверное, знаете, если вы хотите добавить больше значений для каждого пирога, просто редактировать данные. Например:

var data = [ 
    [20, 100, 100, 56, 23, 20, 100, 100, 56, 23 ], 
    [40], 
    [60] 
]; 

Новая скрипка: http://jsfiddle.net/thatOneGuy/dbrehvtz/3/