代码之家 › 专栏 › 技术社区 › crazyy_photonn

无法读取饼图中未定义的属性“length”

pie-chart data-visualization d3.js

crazyy_photonn · 技术社区 · 7 年前

我是d3新手。js,在制作饼图时,我发现以下错误:

'd3.v4.js:13909 Uncaught TypeError: Cannot read property 'length' of 
undefined'

我的数据格式如下:

  var company = [

 {  
    "company_code": 1,  
    "company_name": "Walmart",
    "health_safety": 3.6,
    "wages": 5,
    "recommended": 4  
  },
  { 
    "company_code": 2,
    "company_name": "HEB",
    "health_safety": 3,
    "wages": 2,
    "recommended": 1
  },
  ]

以下代码如下:

var width = 400;
var height = 400;


//sampling out the data which doesn't have the min_company_code -- for now -- for initial screen



var path = d3.arc()
             .outerRadius(width / 2 - 10)
             .innerRadius(width / 4); 


d3.select('svg')
    .attr('width', width)
    .attr('height', height)
  .append('g')
    .attr('transform', 'translate(' + width / 2 + ', ' + height / 2 + ')')
    .classed('chart', true);

var company_codeData = company.filter(d => d.company_code === 1);
var health = company_codeData[0]['health_safety'];
var parameters = [health, 5 - health];


var arcs = d3.pie()
            .value(parameters);

var path = d3.arc()
             .outerRadius(width / 2 - 10)
             .innerRadius(width / 4);

d3.select('.chart')
      .selectAll('.arc')
      .data(arcs)  // This is the line that gives me the error!!
      .enter()
      .append('path')
        .classed('arc', true)
        .attr('fill', function(d, i){
          return data[i].color;
        })
        .attr('stroke', 'black')
        .attr('d', path);

是否在加载数据之前调用函数?如果是,如何修复错误?我读到我需要在回调中加载数据,但我不知道如何加载如何修复此问题?提前感谢!

2 回复 | 直到 7 年前

Gerardo Furtado 7 年前

无论您想做什么(我不知道,因为您有一个包含多个对象的数据数组,您要过滤、提取一值并使用它创建2元素数组),这是不正确的:

var arcs = d3.pie()
    .value(parameters);

不应将实际数据传递给 value 饼图生成器的方法。必须将数据传递给饼图生成器本身。在您的情况下:

var arcs = d3.pie()(parameters);

此外,没有 data 或 color 在您的代码片段中,我将其更改为:

.attr('fill', function(d, i) {
    return i ? "blue" : "green";
})

它返回 blue 或 green 相反

var company = [{
  "company_code": 1,
  "company_name": "Walmart",
  "health_safety": 3.6,
  "wages": 5,
  "recommended": 4
}, {
  "company_code": 2,
  "company_name": "HEB",
  "health_safety": 3,
  "wages": 2,
  "recommended": 1
}];

var width = 400;
var height = 400;

var path = d3.arc()
  .outerRadius(width / 2 - 10)
  .innerRadius(width / 4);


d3.select('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + width / 2 + ', ' + height / 2 + ')')
  .classed('chart', true);

var company_codeData = company.filter(d => d.company_code === 1);
var health = company_codeData[0]['health_safety'];
var parameters = [health, 5 - health];


var arcs = d3.pie()(parameters);

var path = d3.arc()
  .outerRadius(width / 2 - 10)
  .innerRadius(width / 4);

d3.select('.chart')
  .selectAll('.arc')
  .data(arcs) // This is the line that gives me the error!!
  .enter()
  .append('path')
  .classed('arc', true)
  .attr('fill', function(d, i) {
    return i ? "blue" : "green";
  })
  .attr('stroke', 'black')
  .attr('d', path);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

-1

Mike Tung 7 年前

问题就在这段代码中。

var company\u code数据=公司。筛选器(d=>d.company\u code===1); var health=公司代码数据[0][“health\u safety”]; var参数=[健康,5-健康];

对于 company ,这是一个对象数组,如何知道该属性存在?此外,您还进行了控制台操作。记录这3个变量以确保它们已定义?