当我尝试使用d3js创建饼图时解析错误

Question

我正在尝试使用d3js创建饼图。当我使用简单的json文件时，我不会遇到任何问题。但后来当我尝试使用稍微复杂的json时，我得到了这两个错误。

Error: Problem parsing d="M0,-300A300,300 0 1,1 NaN,NaNLNaN,NaNA20,20 0 1,0 0,-20Z"    
Error: Problem parsing d="MNaN,NaNA300,300 0 1,1 NaN,NaNLNaN,NaNA20,20 0 1,0 NaN,NaNZ" 

根据我的理解，错误发生在arcs.append（＆＃34;路径＆＃34;）。attr（＆＃34; d＆＃34;，arc）。但不知道怎么解决它。

这是d3js代码

<div id="sample1">

<script>
    var r = 300;
    var color = d3.scale.category10()
     var canvas = d3.select("#sample1").append("svg")
        .attr("width", 700)
        .attr("height", 700);

    var group = canvas.append("g")
        .attr("transform", "translate(350,350)");

    var arc = d3.svg.arc()
        .innerRadius(20)
        .outerRadius(r);

    var pie = d3.layout.pie()
        .value(function(d) {
            d.children.forEach(function(x) {
                return x.value;
            });
        })
        .sort(null);

    d3.json("js/mydata.json", function(data) {

        var arcs = group.selectAll(".arc")
            .data(pie(data.children))
            .enter()
            .append("g")
            .attr("class", "arc");


        arcs.append("path")
            .attr("d", arc)
            .attr("fill", function(d) {
                d.data.children.forEach(function(x) {
                    return color(x.name);
                });
            });

    })
</script>

</div>

这是我的json

{
"name": "All",
"children": [
    {
        "name": "Main1",
        "children": [
            {
                "name": "Sub1",
                "value": 6.25
    },
            {
                "name": "Sub2",
                "value": 12.50
    },
            {
                "name": "Sub3",
                "value": 6.25
    }
    ]
    },
    {
        "name": "Main2",
        "children": [
            {
                "name": "Sub4",
                "value": 6.25
    },
            {
                "name": "Sub5",
                "value": 12.50
    },
            {
                "name": "Sub6",
                "value": 6.25
    }
    ]
    },
    {
        "name": "Main3",
        "children": [
            {
                "name": "Sub7",
                "value": 6.25
    },
            {
                "name": "Sub8",
                "value": 12.50
    },
            {
                "name": "Sub9",
                "value": 6.25
    }
    ]
    },
    {
        "name": "Main4",
        "children": [
            {
                "name": "Sub10",
                "value": 6.25
    },
            {
                "name": "Sub11",
                "value": 12.50
    },
            {
                "name": "Sub12",
                "value": 6.25
    }
    ]
    }
]
}

更新：

＆＃34; Lars Kotthoff＆＃34;工作。然而，这种方法并没有解决我在这里提到的实际问题。问题是，我想给所有Main1，Main2，Main3，Main4边框。这意味着虽然这里有12种颜色，但边界只有4种，即根据迭代父母将所有三种颜色分组为一种颜色。

下图显示了我的要求。