Question

initiaa Bar chart 我想将此条形图转换为饼图。我尝试过转换函数和附加代码。但它似乎没有用。

这是我的饼图的代码

   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

数据链接似乎是个问题。每次控制台都说无效值。 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) });

将条形图更改为饼图

1 个答案: