Question

当我在饼图中创建第一组扇区时，效果很好。特别是，每个路径的属性d都设置正确。

var grx = chart.selectAll(".sector").data(pie(dataPoints))
  .enter().append("g").attr("class", "sector");
grx.append("path").attr("d", arc)
  .style("fill", function(d) { return colorsFull(d.value); });

然后，我尝试使用相同的模式添加新的内部饼图。创建元素，我可以通过调查DOM结构来确认。然而，它们没有显示出来，即使它没有显示在JsFiddle的控制台中，我还是得到了一堆NaN。

var gry = chart.selectAll(".subSector").data(pie(drillData))
  .enter().append("g").attr("class", "subSector");
gry.append("path").attr("d", sub)
  .style("fill", function(d) {return colorsDrill(d.value); });

所以，我的路径数据无效，但我看不出它是怎么回事。建议？

小提琴是here。

Answer 1

您的drillData格式不正确无法传递到pie功能。它看起来像这样：

[
  {
    "key": "Category 1",
    "val": [{ "Category": "", "Key": "", Value: 1}, ... ]
  }
  ...
]

你的派对函数期望一个对象数组的属性val是数字，而不是数组（这是.value所做的）。

我猜你需要将你的drillData分组到你点击的那个：{/ p>

 var subData = null;
 drillData.forEach(function(d,i){
   if (d.key === key) subData = drillData[i].val;
 });

您现在在subData中有一个对象数组，其属性为值，这是一个数字。我们越来越近了，但现在我们需要重新定义我们的派函数，因为它期望 val ，而不是值：

pie.value(function(d){
  return d.Value;
});

所以，现在我们终于可以打电话了：

pie(subData)

没有错误。但是，我们仍然遇到问题，现在你正在尝试用300多个楔子构建一个内部圆环图（它不会很漂亮）。

这是updated fiddle我开始修理的事情。

无法为路径的d属性重新生成有效数据

1 个答案: