javascript - 获取 TypeError : . selectAll(...).enter 不是 d3.js 的函数

Question

我遇到了一个我真的不明白的错误。我正在尝试使用此处描述的饼图 https://gist.github.com/enjalot/1203641并将其作为选项添加到我的程序中。

function chart (div) {


var width = 300,
height = 300, 
radius = 100, 
color = d3.scale.category20c();


div.each(function() {

  var div = d3.select(this);
  var   g = div.select('g');

  var vis,arc,pie,arcs;

  if (g.empty()) {

    vis = div.append("svg:svg")
            .data(group.top(18))
            .classed('barchart', true)
            .attr("width",width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('svg:g')
            .attr('transform', 'translate(' + (margin.left+radius) + ',' + (margin.top+radius) + ')');

    arc = d3.svg.arc() 
            .outerRadius(radius);

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

    arcs = vis.selectAll("g.slice") 
            .enter() 
            .append("svg:g")
            .attr("class", "slice");

    arcs.append("svg:path")
            .attr("fill", function(d, i) { return color(i); } )
            .attr("d", arc); 

    arcs.append("svg:text")
            .attr("transform", function(d) {
              d.innerRadius = 0;
              d.outerRadius = radius;
              return "translate(" + arc.centroid(d) + ")"; 
            })
            .attr("text-anchor", "middle");
            //.text(function(d, i) { return data[i].label; });
  }

当我运行我的脚本时，我得到这个:TypeError: vis.selectAll(...).enter is not a function在我的 index.html 中有 d3.js，所以它应该能够访问资源。

我在这里不知所措，所以如果你们能帮助我，那就太好了!非常感谢，祝您有愉快的一天!

Answer 1

调用selectAll()后在调用 enter() 之前您必须将数据附加到将通过调用 data() 创建的对象.例如:

 arcs = vis.selectAll("g.slice") 
            .data(dataset)
            .enter() 
            .append("svg:g")
            .attr("class", "slice");

其中数据集是数据的数组，例如:

dataset = [1,2,3,4]