Question

我是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。

以下是包含这些更改的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

问题在于此片段。

var company_codeData = company.filter（d =＆gt; d.company_code === 1）; var health = company_codeData [0] [＆＃39; health_safety＆＃39;]; var parameters = [health，5 - health];

对于company，这是一个对象数组，你怎么知道该属性存在？另外你是console.log这3个变量来确保定义它们吗？

Answer 3

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

要

var health = company[0].health_safety;

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

3 个答案: