错误：<路径> 属性 d：预期的弧标志（“0”或“1”）答案

【问题标题】：Error: <path> attribute d: Expected arc flag ('0' or '1')错误：<路径> 属性 d：预期的弧标志（“0”或“1”）
【发布时间】：2017-09-20 11:42:51
【问题描述】：

我一直在寻找可能的解决方案，但对我没有任何帮助。

问题是当我尝试相应地更新数据和饼图时，转换不起作用并打印主题中多次提到的错误。我对JS有点陌生，所以我正在寻求帮助。

代码：

    var pie = d3.pie();

    var pathArc = d3.arc()
        .innerRadius(200)
        .outerRadius(250);

    var color = d3.scaleOrdinal(d3.schemeCategory10);

    var t = d3.transition()
        .duration(500);

    var path = piesvg.selectAll("path")
        .data(pie(gdp_values));

    path.exit()
        .transition(t)
        .remove();

    path.transition(t)
        .attr("d",function (d) {
            return pathArc(d);
        })
        .attr("fill",function(d, i){return color(i);});

    path.enter()
        .append("path")
        .transition(t)
        .attr("d",pathArc)
        .attr("fill",function(d, i){return color(i);});

初始数据集（gdp_values）；

[407500000000, 417300000000, 439800000000, 680900000000, 980900000000, 1160000000000, 1727000000000, 2249000000000, 2389000000000, 3074000000000]

当数据更改为另一个相似的数据时它确实有效，但是当数据更改如下时，转换不起作用并抛出相同的错误 40 次。

[7714000000, 123900000000, 846200000000]

有什么想法吗？

【问题讨论】：

标签： javascript d3.js transition

【解决方案1】：

您必须颠倒选择的顺序：输入选择应该在更新选择之前：

path.enter()
    .append("path")
    .transition(t)
    .attr("d", pathArc)
    .attr("fill", function(d, i) {
        return color(i);
    });

path.transition(t)
    .attr("d", function(d) {
        return pathArc(d);
    })
    .attr("fill", function(d, i) {
        return color(i);
    });

这里是演示：

var piesvg = d3.select("svg").append("g").attr("transform", "translate(250,250)")

var gdp_values = [407500000000, 417300000000, 439800000000, 680900000000, 980900000000, 1160000000000, 1727000000000, 2249000000000, 2389000000000, 3074000000000];

var gdp_values2 = [7714000000, 123900000000, 846200000000];

var pie = d3.pie();

var pathArc = d3.arc()
  .innerRadius(200)
  .outerRadius(250);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var t = d3.transition()
  .duration(500);

update(gdp_values)

setTimeout(function() {
  update(gdp_values2);
}, 1000)

function update(data) {

  var path = piesvg.selectAll("path")
    .data(pie(data));

  path.exit()
    .transition(t)
    .remove();

  path.enter()
    .append("path")
    .transition(t)
    .attr("d", pathArc)
    .attr("fill", function(d, i) {
      return color(i);
    });

  path.transition(t)
    .attr("d", function(d) {
      return pathArc(d);
    })
    .attr("fill", function(d, i) {
      return color(i);
    });



}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="500"></svg>

【讨论】：

它不起作用，但我在此链接上使用了名为 arcTween 的函数，而不是直接使用 pathArc。它当时有效，但是动画并不那么令人满意。 @Gerardo Furtado
你说的“没用”是什么意思？你看到我的sn-p了吗？

【解决方案2】：

我在对图表进行数据更新时收到此错误。就我而言，解决方案是防止在数据加载期间绘制图表。猜测 arcTween 代码不能优雅地处理数据更改。

【讨论】：