在同一页面上运行线区图和圆环图时出现D3.js错误

时间:2014-07-20 06:44:41

标签: javascript d3.js

我一直遇到一个错误,上面写着“未捕获的TypeError:无法使用d3.v3.js读取未定义的属性'map'。

这是我的圆环图代码:

function pieChart ( dataurl, selector ) {
  var margin = {top: 20, right: 20, bottom: 20, left: 20};
    width = 400 - margin.left - margin.right;
    height = width - margin.top - margin.bottom;

  var radius = Math.min(width, height) / 2;

  var color = d3.scale.ordinal()
    .range(["#3399FF", "#5DAEF8", "#86C3FA", "#ADD6FB", "#D6EBFD"]);

  var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius - 20);

  var pie = d3.layout.pie()
    .sort(null)
    .startAngle(1.1*Math.PI)
    .endAngle(3.1*Math.PI)
    .value(function(d) { 
      return d.value; 
    });

  var donut = d3.select("#portfolio")
      .append('svg')
      .attr("width", '100%')
      .attr("height", '300px')
      .attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
      .attr('preserveAspectRatio','xMinYMin')
      .append("g")
      .attr("transform", "translate(" + ((width/2)+margin.left) + "," + ((height/2)+margin.top) + ")");

  d3.json("data/donut.json", function(error, json) {
      json.forEach(function(kv){
        kv.Data.forEach(function(d){
          d.value = +d.value;
        });

      // // console.log(json);
      //   json.Data.value.forEach(function(d) {
      //     d.value = +d.value;
      //     console.log(d.value);
      //   });

        var path = donut.selectAll(".arc")
          .data(pie(kv.Data.value))
        .enter().append("g")
          .attr("class", "arc");

        g.append("path")
          .style("fill", function(d) { return color(d.Data.label); })
          .transition().delay(function(d, i) { return i * 500; }).duration(500)
          .attrTween('d', function(d) {
               var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
               return function(t) {
                   d.endAngle = i(t);
                 return arc(d);
               }
          });
    });
  });

};

它不会显示圆环图并将错误标记到控制台中的d3.v3.js文件中。以下是它给我的错误:

d3.layout.pie = function() {
    var value = Number, sort = d3_layout_pieSortByValue, startAngle = 0, endAngle = 2 * π;
    function pie(data) {
      var values = data.map(function(d, i) {
        return +value.call(pie, d, i);

非常感谢任何帮助。

0 个答案:

没有答案