Question

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

2018-01-15

1315

d3.js data-visualization pie-chart

我是 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);

该函数是否在加载数据之前被调用？如果是，我该如何修复错误？我读到我需要在回调中加载数据，但我不知道如何我该如何解决这个问题？提前谢谢！

Answer 1

无论您尝试做什么（我不知道，因为您有一个包含多个对象的数据数组，您正在过滤这些对象，提取一个值并使用它来创建一个 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>

Answer 2

问题就出在这个代码片段中。

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

对于 company ，它是一个对象数组，您如何知道该属性存在？另外，您是否通过 console.log 记录了 3 个变量以确保它们已定义？