Question

这是我一直在努力的https://www.twilio.com/docs/tutorials/walkthrough/ivr-screening/csharp/mvc#4。最好将完整的代码引用到此处，不要因为这一切而混淆帖子。

我的内圈有问题（圆环内的灰色圆圈，顶部有数字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");

Answer 1

您尝试使用生成外部圆弧的相同数据来生成整圆。因为饼（数据）是两个对象，所以你要创建两个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");

如何防止元素分裂成两个路径

1 个答案: