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

时间:2014-05-23 12:43:47

标签: javascript d3.js

我收到的错误是我真的不明白。我正在尝试使用此处描述的饼图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不是函数 在我的index.html中,我有d3.js所以它应该能够访问资源。

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

1 个答案:

答案 0 :(得分:10)

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

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

其中dataset是数据的数组,例如:

dataset = [1,2,3,4]