创建d3.js径向图

Question

我正在尝试使用以下数据和以下方法创建一个非常简单的d3.js径向图。我一直收到错误Uncaught TypeError: Cannot read property 'length' of undefined有没有其他人遇到同样的问题？

的UserData

var userData = [
    {
        'key':'social',
        'value':1.1,
        'y':1.1,
        'y0':1.1
    },
    {
        'key':'focus',
        'value':1.1,
        'y':1.1,
        'y0':1.1
    },
    {
        'key':'activity',
        'value':1.1,
        'y':1.1,
        'y0':1.1
    }
];

附加图表

svg.selectAll(".userData")
      .data(userData)
    .enter().append("path")
      .attr("class", "userData")
      .attr("d", function(d) { return area(d.values); })
      .style("fill","newColor")
      .style("opacity",.6)
      .style("stroke","pink")
      .style("stroke-width",7);

Currnetly Produces：

尝试添加序列

svg.selectAll(".axis")
      .data(d3.range(angle.domain()[1]))
    .enter().append("g")
      .attr("class", "axis")
      .attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })
    .call(d3.svg.axis()
      .scale(radius.copy().range([-5, -radius]))
      .ticks(5)
      .orient("left"))
    .append("text")
      .attr("y", 
        function (d) {
          if (window.innerWidth < 455){
            return -(window.innerHeight * .335);
          }
          else{
            return -(window.innerHeight * .335);
          }
        })
      .attr("dy", ".71em")
      .attr("text-anchor", "middle")
      .text(function(d, i) { return capitalMeta[i]; })
      .attr("style","font-size:16px;")
      .style("fill", function(d,i) {
        if ($.inArray(meta[i], unhealthyArray) != -1) {
           return "red";
       } else {
           return "black";
        }
    });