要素が2つのパスに分割されないようにする方法

Question

ここでは、私が取り組んできたcodePenです。これは完全なコードのためにこれを参照するのが最善であり、すべての投稿を混乱させたくありません。

内側円（ドーナツの内側の灰色の円、上に数字644が付いています）に問題があります。

問題は、内円が2つの部分（2つの部分）に分割されていることです。なぜか分かりません。

別のデータで2つの変数を作成してみましたが、内部の円（innerPie）に渡しました。以下のコードを参照してください。

ドーナツチャートの円が2つに分かれているのはなぜですか？ どうすれば丸全体を作ることができますか？

// this is for the donut chart 
 
    var pie = d3.layout.pie() 
 
     .sort(null) 
 
     .value(function(d) { return d.region; }); 
 

 
    // new variable i created just for the inner circle 
 
    var innerPie = d3.layout.pie() 
 
     .sort(null) 
 
     .value(function(d) { return d.toursCreated; }); 
 

 
    // the creation of the inner circle 
 
    var innerG = svg.selectAll(".innerArc") 
 
     .data(pie(data)) 
 
     .enter().append("g") 
 
     .attr("class", "innerArc"); 
 

 
    innerG.append("path") 
 
    .attr("d", innerArc) 
 
    .style("fill", "grey");

Answer 1

あなたは完全な円を生成するために、外部の円弧を生成し、同じデータを使用しようとしています。 pie（data）は2つのオブジェクトであるため、2つのg.innerArc要素を作成し、それらを同じ色、つまりグレーに設定するだけですが、エッジの問題を回避することはできません。 1つのハックは、両方のパス要素のストロークを灰色にするだけです。

innerG.append("path") 
    .attr("d", innerArc) 
    .style({"fill": "grey", "stroke" : "grey"}); 

しかし、最も簡単なことは、円を描くことです。サークル要素が既に存在する場合、円を作成するために円グラフレイアウトを使用する必要はないようです。

var innerG = svg.append("g") 
     .attr("class", "innerArc") 
     .append("circle") 
     .attr("r", 40) 
     .style("fill", "grey");