d3.js - path.centroid エラー: パスが定義されていません

Question

私はまだ自分のプロジェクトに取り組んでいます。パスの中心を追加する円を使用して、geojson ファイルからマップにいくつかの円を追加しようとしました。私のWebinspektorは、パスが未定義であると言います:-(彼は正しいと思いますが、理由がわかりません。助けてくれてありがとう.

コードは次のとおりです。

overlayBeschaeftigte.afterAdd = function () {
                    var div = d3.selectAll("#" + overlayBeschaeftigte.div.id);
                        //get the vector layer div element

                    div.selectAll("svg").remove();                  //remove the existing svg element and create a new one

                    var svg = div.append("svg");

                    var group = svg.append("g");
                    var bounds = d3.geo.bounds(collection);

                    var path = d3.geo.path()
                        .projection(project);

                    var feature  = group.selectAll("path")
                        .data(collection.features)
                        .enter()
                        .append("path")
                    group.selectAll("circle")
                        .data(collection.features)
                        .enter()
                        .append("circle")
                        .attr('cx', function(d) {
                             var x = path.centroid(d)[0];
                             return x;

                        })
                        .attr('cy', function(d) {
                             var y = path.centroid(d)[1];
                             return y;
                        })
                        .attr('r', 15)
                        .style("fill", "yellow")
                        .style("opacity", 0.75) 
                }