0

这是我的代码：

d3.json('../../dev/json/ajson.php', function (error, json) {
  if (error) return console.warn(error);

  megavalues = ["Meetings", "Development", "Management"];
  megadata = [213, 891, 121];

  var categoryGraph = d3.select('#graph-container').append('svg')
      .attr('width', graphWidth)
      .attr('height', graphHeight)
      .data(megadata)
      .append('svg:g')
      .attr('transform', 'translate(' + graphWidth / 2.085 + ',' + graphHeight / 2.085 + ')');

  var arc = d3.svg.arc()
      .outerRadius(graphRadius - 10)
      .innerRadius(graphRadius - 130);

  var pie = d3.layout.pie()
      .value(function(d){ return d });

  var categoryDataGraph = categoryGraph.selectAll('g.slice')
      .data(pie(megadata))
      .enter().append('svg:g')
      .attr('class', 'slice');

  categoryDataGraph.append('svg:path')
      .attr('fill', function(d, i){ return color(i); })
      .attr('d', arc);

  categoryDataGraph.append('text')
      .attr('transform', function(d) { return 'translate(' + arc.centroid(d) + ')' })
      .attr('dy', '.35em')
      .attr('text-anchor', 'middle')
      .text(function(d, i) { return megavalues[i]; });

这是结果：

http://cloud.erikhellman.com/eQHJ/5TmsqKWu

这是我的问题：

我目前正在使用 2 个数组（megavalues 和 megadata）绘制图表，但我想做的是使用这个 json 对象将它绘制到 categoryGraph 上：

json.projectData.timeDistribution

看起来像这样：

Object {Meetings: 12, Planning: 1, Development: 21}

但是，当我将对象作为数据传递时，不会绘制图形和/或返回此错误：

Uncaught TypeError: Object #<Object> has no method 'map'

在过去的 5 个小时里，我一直在阅读文档并在谷歌上寻求帮助。这是我第一次使用 D3.js，这远远超出了我认为的 JavaScript 知识。在我发现的所有示例中，要么传递了仅包含数字的数组，要么包含了文本，JSON 看起来不同。但我确信即使我的 JSON 对象看起来像这样，它也必须工作，对吧？

这是我在这里的第一个问题，如果我可以改进这个问题或以任何方式改进这里的任何内容，请告诉我。:)

4

1 回答 1

1

这里的“秘诀”是您如何访问传入的值。您尝试过的两种结构之间的区别在于，一种是数组（并且有效），而另一种是对象（并且没有t)。这是因为 D3 不会遍历对象（如错误消息所示）。

解决此问题的最简单方法是将对象转换为数组，并相应地使用d3.entries并更改访问器函数。也就是说，您的代码看起来像

var pie = d3.layout.pie()
  .value(function(d) { return d.value; });

var categoryDataGraph = categoryGraph.selectAll('g.slice')
  .data(pie(d3.entries(json.projectData.timeDistribution))
  .enter().append('svg:g')
  .attr('class', 'slice');

然后，您还需要更改创建文本的方式：

categoryDataGraph.append('text')
  .attr('transform', function(d) { return 'translate(' + arc.centroid(d) + ')' })
  .attr('dy', '.35em')
  .attr('text-anchor', 'middle')
  .text(function(d, i) { return d3.keys(json.projectData.timeDistribution)[i]; });
于 2013-06-03T10:45:42.497 回答