javascript - 错误 : attribute d: Expected arc flag ('0' or '1' )

Question

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

问题是，当我尝试相应地更新数据和饼图时，转换不起作用并多次打印主题中提到的错误。我对 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]

有什么想法吗？

Answer 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>