如何防止元素分裂成两条路径答案

【问题标题】：How to keep an element from splitting into two paths如何防止元素分裂成两条路径
【发布时间】：2016-05-12 18:44:47
【问题描述】：

这是我一直在研究的codePen。完整的代码最好参考这里，不要把帖子弄得乱七八糟。

我的内圈有问题（甜甜圈内的灰色圆圈，上面有数字 644）。

问题是，内圈被分成两部分（两条路径），我不知道为什么（如果你看得足够近，你也可以看到两部分相交的地方）。

我尝试使用不同的数据创建两个变量，然后将它们传递到内圈 (innerPie) — 请参见下面的代码。

为什么我的圆环图中的圆圈会分成两部分？我怎么能画一个完整的圆圈？

// 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");

【问题讨论】：

标签： javascript d3.js svg data-visualization

【解决方案1】：

您正在尝试使用生成外圆弧的相同数据来生成一个完整的圆。因为 pie(data) 是两个对象，所以您正在创建两个 g.innerArc 元素并将它们设置为相同的颜色，即灰色，但这并没有解决边缘问题，因此看起来有点偏离。一种技巧是将两个路径元素的笔画设为灰色。

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");

【讨论】：