Изменить диаграмму в круговую диаграмму

Question

initiaa Bar chart Я хочу преобразовать эту гистограмму в круговую диаграмму. Я пробовал работать с функцией перехода и добавлением кода. Но это, похоже, не работает.

edited pen

Вот код для моей круговой диаграммы

var width = 150; 
    var height = 150; 
    var radius = Math.min(width, height)/2; 
    var donutWidth = 75; 
    var legendRectSize = 18; 
    var legendSpacing = 4; 

    var color = d3.scale.category20b(); 

    var svg = d3.select('#chart') 
     .append('svg') 
     .attr('width', width) 
     .attr('height', height) 
     .append('g') 
     .attr('transform', 'translate(' + (width/2) + 
     ',' + (height/2) + ')'); 

    var arc = d3.svg.arc() 
     .innerRadius(radius - donutWidth) 
     .outerRadius(radius); 

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

    var tooltip = d3.select('#chart') 
     .append('div') 
     .attr('class', 'tooltip'); 

    tooltip.append('div') 
     .attr('class', 'label'); 

    tooltip.append('div') 
     .attr('class', 'count'); 

    tooltip.append('div') 
     .attr('class', 'percent'); 

    //d3.csv('weekdays.csv', function (error, dataset) { 
     dataset.forEach(function (d) { 
      d.count = +d.count; 
      d.enabled = true; // NEW 
     }); 

     var path = svg.selectAll('path') 
      .data(pie(dataset)) 
      .enter() 
      .append('path') 
      .attr('d', arc) 
      .attr('fill', function (d, i) { 
      return color(d.data.label); 
     }) // UPDATED (removed semicolon) 
     .each(function (d) { 
      this._current = d; 
     }); // NEW 

     path.on('mouseover', function (d) { 
      var total = d3.sum(dataset.map(function (d) { 
       return (d.enabled) ? d.count : 0; // UPDATED 
      })); 
      var percent = Math.round(1000 * d.data.count/total)/10; 
      tooltip.select('.label').html(d.data.label); 
      tooltip.select('.count').html(d.data.count); 
      tooltip.select('.percent').html(percent + '%'); 
      tooltip.style('display', 'block'); 
     }); 

     path.on('mouseout', function() { 
      tooltip.style('display', 'none'); 
     }); 

Answer 1

Увязка данных seemd быть проблемой. Каждый раз, когда на консоли указываются недопустимые значения. Here;s the working fiddle

var data = [10,20,30,40,60, 80, 20, 50]; 
    // the D3 bits... 
    var color = d3.scale.category10(); 
    var width = 180; 
    var height = 180; 
    var pie = d3.layout.pie().sort(null); 
    var arc = d3.svg.arc() 
     .outerRadius(width/2 * 0.9) 
     .innerRadius(width/2 * 0.5); 
    var svg = d3.select(element[0]).append('svg') 
     .attr({width: width, height: height}) 
     .append('g') 
     .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')'); 
    // add the <path>s for each arc slice 
    svg.selectAll('path').data(pie(data)) // our data 
     .enter().append('path') 
     .style('stroke', 'white') 
     .attr('d', arc) 
     .attr('fill', function(d, i){ return color(i) });