javascript - 无法在 d3.js 中的同一页面上生成两个饼图

Question

Failed Example

Woking Example

我正在切换此 pie char t 为动画效果。我将代码包装在一个函数中，并使用 $.each() 循环元素以在同一页面上生成两个图表，但与工作示例不同，这是我用于生成饼图的原始代码，我无法让它工作。谁能找出问题所在吗？

var colors = ["#DFC267","#90C0E2","#DF5A6E","#FFA854","#749D79","#BFE5E2","#d3d3d3"];
function pie(dataset,el){
    console.log(dataset);
    var data = [];
    var color = d3.scale.ordinal().range(colors);
    r = 115,
    labelr = r + 30,
    pi = 2 * Math.PI,
    svg = d3.select(el).append('svg').
        attr('width', 350).
        attr('height', 350),
    group = svg.append('g').
        attr('transform', 'translate(155, 170)')
    ,
    arc = d3.svg.arc().
        innerRadius(r - 50).
        outerRadius(r)
    ,
    pie = d3.layout.pie()
          .value(function(d) { return d.result; }),

    format = d3.format('.3r'),

    arcs = group.selectAll('.arc').
        data(pie(d3.values(dataset))).
        enter().
        append('g').
        attr('class', 'arc')
    ;


    arcs.append('path').
        transition().
        delay(function(d, i) { return i * 500; }).
        duration(750).
        attrTween('d', function(d) {
            var i = d3.interpolate(d.startAngle + 0, d.endAngle);
            return function(t) {
                d.endAngle = i(t);
                return arc(d);
            };
        }).
        style('fill', function(d, i) { return color(i); }).
        style('stroke', '#fff').
        style('stroke-width', '2px')
    ;

    arcs.append('text').
        attr('transform', function(d) {
            var c = arc.centroid(d),
                x = c[0],
                y = c[1],
                h = Math.sqrt(x*x + y*y);
    return "translate(" + (x/h * labelr) +  ',' +
       (y/h * labelr) +  ")"; 
        }).
        attr('text-anchor', 'middle').
        attr('font-size', '1em').
        attr('fill', '#222').
        text(function (d) {
            var total = d3.sum(dataset.map(function(d) { 
              return d.result;                   
            })); 
            var percent = Math.round(1000 * d.value / total) / 10; 
            return percent + ' %';
       });
        var tooltip = d3.select(el).append('div').attr('class', 'tooltip');  
        arcs.on('mousemove', function(d) { console.log(d3.event);
          tooltip.style("top", d3.event.y - r+ "px").style("left", d3.event.x + "px")
        });                         
        arcs.on('mouseover', function(d) { 
            var total = d3.sum(dataset.map(function(d) {               
              return d.result;                                           
            }));     
            tooltip.style('display', 'block') 
            .style("opacity", 1)
            .append('div')                                         
            .attr('class', 'label')                                   
            .append('div')                                        
            .attr('class', 'count')                                      
            tooltip.select('.label').html(d.data.item);               
            tooltip.select('.count').html(d.data.result);      
          });                                                           

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

$('.j_chart').each(function(k,i){
  var dataset = $(this).find('.j_data').text();
  console.log(dataset);
  pie(JSON.parse(dataset),'#j_'+k);
})

这是工作代码:

var colors = ["#DFC267","#90C0E2","#DF5A6E","#FFA854","#749D79","#BFE5E2","#d3d3d3"];
function pie(dataset,el){ console.log(dataset)
  'use strict';
        var width = 280;
        var height = 280;
        var radius = Math.min(width, height) / 2;
        var color = d3.scale.ordinal().range(colors);

        var svg = d3.select(el)
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g')
          .attr('transform', 'translate(' + (width / 2) + 
            ',' + (height / 2) + ')');
        var arc = d3.svg.arc()
          .outerRadius(radius);
        var pie = d3.layout.pie()
          .value(function(d) { return d.result; })
          .sort(null);
        var path = svg.selectAll('path')
          .data(pie(dataset))
          .enter()
          .append('path')
          .attr('d', arc)
          .attr('fill', function(d, i) { 
            return color(d.data.item);
          });
        var tooltip = d3.select(el).append('div').attr('class', 'tooltip');  
        path.on('mousemove', function(d) { console.log(d3.event);
          tooltip.style("top", d3.event.y - radius + "px").style("left", d3.event.x + "px")
        });                         
        path.on('mouseover', function(d) { 
            var total = d3.sum(dataset.map(function(d) {               
              return d.result;                                           
            }));     
            var percent = Math.round(1000 * d.data.result / total) / 10; 
            tooltip
            .style('display', 'block') 
            .style("opacity", 1)
            .append('div')                                         
            .attr('class', 'label')                                   
            .append('div')                                        
            .attr('class', 'count')                                      
            .append('div')                                           
            .attr('class', 'percent'); 

            tooltip.select('.label').html(d.data.item);               
            tooltip.select('.count').html(d.data.result);               
            tooltip.select('.percent').html(percent + '%'); 

          });                                                           

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

Answer 1

问题是你有一个名为“pie”的函数，并且在该函数内，你做了

pie = d3.layout.pie()

因此，覆盖函数定义，最终结果是仅针对第一项调用它。尝试将该函数重命名为其他名称，例如ie_func。检查这个 fiddle 并进行更正:http://jsfiddle.net/cesarpachon/a4r2q4pw/