Getting TypeError: .selectAll(...).enter is not a function with d3.js

Question

I'm getting an error that I really don't understand. I'm trying to use the pie chart describe here https://gist.github.com/enjalot/1203641 and add it as an option in my program.

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; });
  }

When I run my script I get this: TypeError: vis.selectAll(...).enter is not a function In my index.html I have d3.js so it should be able to access the resource.

I'm at a loss here so if you guys could help me that would be great ! Thanks a lot and have a nice day !

Answer 1

After calling the selectAll() and before calling enter() you must attach data to the objects that will be created by calling data(). For example:

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

where dataset is an array of the data, for example:

dataset = [1,2,3,4]